jquery滑块在图像循环前滑动额外块

Question

我正在使用jQuery开发一个非常基本的滑块，我一直有一个问题，就是让它无限地滑动。我要求滑块滑回第一幻灯片后，它到达最后一张幻灯片。我几乎实现了，但问题是，在到达最后一张幻灯片，它是滑动额外的空白幻灯片，然后再滑回第一张幻灯片。

请查一下小提琴。

HTML：

<div class="slider-container">
  <ul>
    <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
  </ul>
  <a href="javascript:void(0);" id="left">left</a>
  <a href="javascript:void(0);" id="right">right</a>
</div>

CSS：

.slider-container {
  width: 400px;
  height: 200px;
  /*overflow: hidden;*/
  position: relative;
}

.slider-container ul {
  list-style-type: none;
  padding: 0;
}

.slider-container ul li {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 400px;
  height: 200px;
  background-color: #fc0;
}

#left {
  position: absolute;
  left: 0;
  top: 100%;
}

#right {
  position: absolute;
  right: 0;
  top: 100%;
}

.slider-container ul li:nth-child(2n) {
  background-color: #0cf;
}

联署材料：

var imgList = $('.slider-container ul li').length;
var imageListWidth = $('.slider-container ul li').width();
var totalWidth = imgList * imageListWidth;
$('.slider-container ul').width(totalWidth);
var shift = 0;

$('#left').on('click', function(e) {
  $('.slider-container ul').animate({
    marginLeft: shift - imageListWidth
  });
  shift = shift - imageListWidth;
  if (parseInt($('.slider-container ul').css('margin-left')) == (imageListWidth - totalWidth)) {
    console.log('inside if left');
    $('.slider-container ul').animate({
      marginLeft: 0
    });
    shift = 0;
  }
  console.log('margin value: ' + parseInt($('.slider-container ul').css('margin-left')));
});

$('#right').on('click', function() {
  $('.slider-container ul').animate({
    marginLeft: shift + imageListWidth
  });
  shift = shift + imageListWidth;
  if ($('.slider-container ul').css('margin-left') == '0px') {
    console.log('inside if right');
    $('.slider-container ul').animate({
      marginLeft: imageListWidth - totalWidth
    });
    shift = imageListWidth - totalWidth;
  }
});

提前谢谢你。

Answer 1

根本的问题是，无论您是在最后一张幻灯片上还是在第一张幻灯片上，您都是在点击开始时将图像动画化：

//no check being performed to see if this this animation is necessary
$('.slider-container ul').animate({
    marginLeft: shift + imageListWidth
});

您应该做的是进行检查，以查看正在查看的图像的当前索引，然后只选择执行当前图像索引的初始动画不是0或imglist。示例：

if (currentImageIndex != imgList) {
    $('.slider-container ul').animate({
        marginLeft: shift + imageListWidth
    });
}

如果您这样做，您当然需要创建一个currentImgIndex变量，并在他们单击滑块时监视它。

当然，您也可以将此检查建立在整个ul的左边框位置上，这取决于您的基础是什么，但是在决定执行初始动画之前，您需要执行某种检查。

这只是对js代码的快速重做，我通过编辑你的小提琴创建了这个程序，它可以工作：

var imgList = $('.slider-container ul li').length;
var imageListWidth = $('.slider-container ul li').width();
var totalWidth = imgList * imageListWidth;
$('.slider-container ul').width(totalWidth);
var shift = 0;
//Track which image is currently viewed
var imgIndex = 1;

$('#left').on('click', function(e) {
  if (imgIndex != imgList) {
    $('.slider-container ul').animate({
      marginLeft: shift - imageListWidth
    });
  }
  shift = shift - imageListWidth;
  if (parseInt($('.slider-container ul').css('margin-left')) == (imageListWidth - totalWidth)) {
    console.log('inside if left');
    $('.slider-container ul').animate({
      marginLeft: 0
    });
    shift = 0;
    e.dequeue();
  }

  imgIndex = (imgIndex + 1 <= imgList) ? imgIndex + 1: 1;
});

$('#right').on('click', function() {
  if (imgIndex != 1) {
    $('.slider-container ul').animate({
      marginLeft: shift + imageListWidth
    });
  }
  shift = shift + imageListWidth;
  if ($('.slider-container ul').css('margin-left') == '0px') {
    console.log('inside if right');
    $('.slider-container ul').animate({
      marginLeft: imageListWidth - totalWidth
    });
    shift = imageListWidth - totalWidth;
  }

  imgIndex = (imgIndex - 1 >= 1) ? imgIndex - 1: imgList;
});

当然，上面的代码可能会更高效一些等等，但我只是做了一个简单的模拟，以说明。