滾動DIV內容水平使用左，右箭頭jQuery中

Question

我想用兩個按鈕滾動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我想執行此操作。任何開源插件都可用。

Answer 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/