jQuery的简单的水平滑块

Question

嗨，您好，

我尝试使用Jquery scrollLeft（）方法创建非常简单的滑块。 我找到了一些答案，我在这里尝试了这个.. 但是没有用 ....我还是jquery的初学者，不知道为什么。

HTML

   <div class="gallery-slider ">
       <div class="images-preview">
           <img alt="" class="img-responsive" src="http://placehold.it/300">
           <img alt="" class="img-responsive" src="http://placehold.it/300">
           <img alt="" class="img-responsive" src="http://placehold.it/300">
           <img alt="" class="img-responsive" src="http://placehold.it/300">
           <img alt="" class="img-responsive" src="http://placehold.it/300">
           <img alt="" class="img-responsive" src="http://placehold.it/300">
           <img alt="" class="img-responsive" src="http://placehold.it/300">
           <img alt="" class="img-responsive" src="http://placehold.it/300">
           <img alt="" class="img-responsive" src="http://placehold.it/300">
           <img alt="" class="img-responsive" src="http://placehold.it/300">
           <img alt="" class="img-responsive" src="http://placehold.it/300">
           <img alt="" class="img-responsive" src="http://placehold.it/300">
       </div>
       <div class="controls">
           <div class="right-arrow"><i class="fa fa-angle-left fa-3x"></i></div>
           <div class="left-arrow"><i class="fa fa-angle-right fa-3x"></i></div>
       </div>
   </div>

CSS

    .gallery-slider {
    position: relative;
}

.gallery-slider .images-preview {
    margin: auto;
    height: 230px;
    overflow: hidden;
}

.gallery-slider .images-preview img {
    display: inline-block;
    overflow: visible;
    width: 410px;
    margin: 10px 17px;
}
.gallery-slider .images-preview img, .controls {
        height: 200px;
    width: 26%;
}
/* Controls */
.controls {
    position: absolute;
    top: 10px;
    width: 100%;
}


.right-arrow, .left-arrow {
    display: inline-block;

    padding: 62px;
    background-color: rgba(255, 255, 255, 0.76);
    position: absolute;
    height: 100%;
    cursor: pointer;
}
.right-arrow i, .left-arrow i{
        margin: 23px 20px;
}
.left-arrow {
    right: 0px;
}

.right-arrow {
    left: 0px;
    text-align: right;
}

jQuery的

  $(".left-arrow").click(function () { 
      var leftPos = $('.images-preview img').scrollLeft();
      $(".images-preview img").animate({scrollLeft: leftPos - 100}, 1000);
    });

    $(".right-arrow").click(function () { 
      var leftPos = $('.images-preview img').scrollLeft();
      $(".images-preview img").animate({scrollLeft: leftPos + 100}, 1000);
    });

所以有帮助吗？

提前致谢

在这里摆弄

更新：我也需要它在滚动结束时返回到scrollleft():0

Answer 1

您要的是简单但充满问题的东西。 这些问题使事情变得复杂。

1. 我已经将图片预览位置设为绝对。 它允许您通过控制向左（css）进行滚动。 无法使scrollLeft正常工作。 不知道为什么。 如果有人这样做，我很想知道。
2. 需要计算图像预览中的img数量。 允许您添加或删除图像。
3. 添加了var active以防止单击速度太快。

JavaScript的：

var target = $('.images-preview');

//get the total number of images
var total = $('.images-preview img').length;
//calculate the width of the image-preview
var width = total * 300 + total * 40;
var c = 1;
// 80 is to center the image-preview 
var originalLeft = 80;
// 300 is the image size, 40 is the total margin (this is how many px image-preview
// would have to move left for one image
var totalImg = 300 + 40;
// startToEnd is the total width when you click left(arrow-right) on first image
var startToEnd = width -originalLeft -340;
var a = '';
//need this to prevent multiple clicks
var active = false;

//put in the width at page rendering
$(document)function(){
    target.css('width', width);
});

 $(".left-arrow").click(function () { 
    if (active === false){
        if (c === total){
            a = originalLeft;
            c = 1;
        }else{
            a = '-='+totalImg;
            c++;
        }
        //turn the active to true to prevent another animation from activating
        active = true;
        target.animate(
            {left: a},
            {duration:500,
            //turn the active off after animation is complete
            complete: function(){
                active = false;
            }
        });
    }
 });
 $(".right-arrow").click(function () { 
    if (active === false){
        if (c === 1){
            a = '-'+startToEnd;
            c = total;
        }else{
            a = '+='+totalImg;

            c--;
        }
        active = true;
        target.animate(
            {left: a},
            {duration:500,
            complete: function(){
                active = false;
            }
        });
    }
 });

CSS：

.gallery-slider{
    width:500px;
    height:300px;
    position:relative;
    overflow:hidden;
}
.images-preview{
    width:300px;
    height:300px;
    position:absolute;
    left:80px;
}
.images-preview img{
    width:300px;
    height:300px;
    position:relative;
    float:left;
    margin:0 20px;
}
.control{
    width:100%;
    height:100%;
    position:relative;
}
.right-arrow, .left-arrow{
    position:absolute;
    padding:0 26px;
}
.right-arrow i, .left-arrow i{
    line-height:300px;
}
.right-arrow{
    left:0;   
}
.left-arrow{
    right:0;
}

这是演示： https : //jsfiddle.net/ood26n7b/1/