使用jquery中的左右箭头水平滚动div内容答案

【问题标题】：Scroll div content horizontally using left and right arrow in jquery使用jquery中的左右箭头水平滚动div内容
【发布时间】：2014-12-05 10:12:14
【问题描述】：

我想用两个按钮滚动 div 内容

HTML编码如下：

<div class="bstimeslider">
    <a href="#"> <img src="images/left.png" ></a>
        <div class="tslshow">
            <div class="bktibx"> 12:00   </div>
            <div class="bktibx"> 12:30   </div>
            <div class="bktibx"> 13:00   </div>
            <div class="bktibx"> 13:30   </div>
            <div class="bktibx"> 14:00   </div>
            <div class="bktibx"> 14:30   </div>
            <div class="bktibx"> 15:00   </div>
            <div class="bktibx"> 15:30   </div>
            <div class="bktibx"> 16:00   </div>
            <div class="bktibx"> 16:30   </div>
            <div class="bktibx"> 17:00   </div>
            <div class="bktibx"> 17:30   </div>
         </div>
    <a href="#"><img src="images/right.png"></a>

现在只有 15:00 显示，当我向右滚动按钮时，它应该显示从 15:30 到 17:30..

同样，当我单击左箭头时，它应该向左滚动..

使用 Jquery 我想执行此操作。任何开源插件都可用。

【问题讨论】：

您可以更改scrollLeft 的位置。同意@Daniel 看到一些代码会很棒。

标签： jquery html

【解决方案1】：

这只是一个简单的示例，但您可以看到重点 - 怎么做。

HTML：

<div class="bstimeslider">
    <div id="rightArrow"></div>
        <div id="viewContainer">
            <div id="tslshow">
                <div class="bktibx"> 12:00   </div>
                <div class="bktibx"> 12:30   </div>
                <div class="bktibx"> 13:00   </div>
                <div class="bktibx"> 13:30   </div>
                <div class="bktibx"> 14:00   </div>
                <div class="bktibx"> 14:30   </div>
                <div class="bktibx"> 15:00   </div>
                <div class="bktibx"> 15:30   </div>
                <div class="bktibx"> 16:00   </div>
                <div class="bktibx"> 16:30   </div>
                <div class="bktibx"> 17:00   </div>
                <div class="bktibx"> 17:30   </div>
             </div>
        </div>
        <div id="leftArrow"></div>
</div>

CSS：

.bstimeslider {

width:500px;
height:40px;
background:#ccc;
position:relative;    
}

.bktibx {

float:left;
margin:0 40px 0 0 ;
font-size:18px;
width:60px;
display:block;
background:#000;
color:#fff;

}

#tslshow {
position:absolute;
left:0;
width:1200px;

}

#leftArrow {

width:40px;
height:40px;
background:#ff0000; 
position:absolute;
left:0px;
}

#rightArrow {

width:40px;
height:40px;
background:#ff0000; 
position:absolute;
right:0px;
}

#viewContainer {
width:360px;
height:100%;
background:#00ff00;
position:absolute;
left:50%;
margin-left:-180px;
overflow:hidden; 
}

JavaScript：

var view = $("#tslshow");
var move = "100px";
var sliderLimit = -750;

$("#rightArrow").click(function(){

    var currentPosition = parseInt(view.css("left"));
    if (currentPosition >= sliderLimit) view.stop(false,true).animate({left:"-="+move},{ duration: 400})

});

$("#leftArrow").click(function(){

    var currentPosition = parseInt(view.css("left"));
    if (currentPosition < 0) view.stop(false,true).animate({left:"+="+move},{ duration: 400});

});

小提琴：http://jsfiddle.net/yfqyq9a9/2/

【讨论】：

一切正常。我想在两行而不是单行中显示 bktibox div。所以 viewcontainer 高度将是 400 或 500 像素。但它仍然显示在单行中。
我喜欢这个例子。但是有没有办法把它放在一个连续的循环中，这样当它到达最后一个 div 时，它会再次从头开始滚动？

【解决方案2】：

您可以使用常规的旧 CSS 更改滚动条的样式：

::-webkit-scrollbar {
    width: 20px;
}

::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px grey;
        border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: red;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #b30000;
}

【讨论】：