Question

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

请查看fiddle。

HTML：

<?php
//DBCONFIG.php

class DBCONFIG {

    public static $db_conn = "mysql:host=localhost;dbname=databasename;charset=utf8";
    public static $db_user = "username";
    public static $db_pass = "password";

}

CSS：

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

JS：

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

提前谢谢。

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

当然上面的代码可能会更高效等等，但我只是为了说明目的做了一个快速的模拟。

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

1 个答案: