使用jquery中的向左和向右箭头水平滚动div内容 [英] Scroll div content horizontally using left and right arrow in jquery

问题描述

我想用两个按钮滚动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我想执行此操作。任何开源插件都可用。

解决方案

这只是一个简单的例子，但您可以看到重点 - 如何去做。

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; 
背景：#ccc; 
职位：亲属; 
} 
 
 .bktibx {
 
 float：left; 
 margin：0 40px 0 0; 
 font-size：18px; 
 width：60px; 
 display：block; 
背景：＃000; 
颜色：#fff; 
 
} 
 
 #tslshow {
 position：absolute; 
剩下：0; 
 width：1200px; 
 
} 
 
 #leftArrow {
 
 width：40px; 
 height：40px; 
背景：＃ff0000; 
位置：绝对; 
 left：0px; 
} 
 
 #rightArrow {
 
 width：40px; 
 height：40px; 
背景：＃ff0000; 
位置：绝对; 
 right：0px; 
} 
 
 #viewContainer {
 width：360px; 
身高：100％; 
背景：＃00ff00; 
位置：绝对; 
剩下：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/

I Want to scroll div contents using two buttons

HTML Coding is given below:

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

Now only 15:00 is displaying when i scroll right button it should show from 15:30 to 17:30..

Similarly when i click left arrow it should scroll left..

Using Jquery i want to perform this. Any opensource plugin is available.

解决方案

It's just a simple example, but you can see the point - how to do it.

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});

});

Fiddle: http://jsfiddle.net/yfqyq9a9/2/

这篇关于使用jquery中的向左和向右箭头水平滚动div内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！