Question

我有一个带有两个图像的jQuery滑块，我想要第一个图像滑回来，所以它是永久循环。

我在这里链接了一支笔https://codepen.io/emilychews/pen/ENbbqW

我的代码是：

HTML

<div id="slider">
<ul class="slides">
    <li class="slide"><img src="images/img1.jpg" alt="slideone"></li>
    <li class="slide"><img src="images/img2.jpg" alt="slidetwo"></li>
</ul>
</div>

的jQuery

$(document).ready(function(){

var slider = $('#slider'),
  slides = $('#slider .slides'),
  slide = $('.slide'),
  currentSlide = 0;

setInterval (function(){
$(slides).animate({'margin-left': '-=266.5px' }, 1000, function(){
        currentSlide++;
          if (currentSlide === slides.length) {
              currentSlide = 0;
              slides.css('margin-left', 0);
          }
  });

}, 3000);

});

我已将其设置为原始幻灯片返回到第一张图像，边距为左：0，但我无法解决这个问题，以便从右侧开始动画。当slide2进入位置时，slide1立即出现，而没有setInterval（）函数或动画本身的3秒延迟。

任何帮助都会很棒。

艾米丽。

Answer 1

有两种方法可以做无限滑块。

首先，当显示的一个向左转并消失时，您应该将其附加到父节点。

但是通过这种方式，你应该保持.slides足够的宽度，以便在时间滑动时保留更多的li。（

// CSS
#slider .slides {
  display: block;
  height: 400px;
  width: 1000000px; /*enough width to keep slides*/
  margin: 0;
  padding: 0;
}
// JS
setInterval (function(){
  $(slides).animate({'margin-left': '-=266.5px'}, 1000, function(){
    $('.slide').eq(currentSlide).clone().appendTo($('#slider .slides'))
    // Maybe you need to give .slides new width here
    currentSlide++
  });
}, 3000);

通过这种方式，你可以理解我的谅解，但代码可能有点难看，所以我会给你下一个计划。

其次，只需使用你保留的无限滑块即可。

// HTML
// use .slide1 .slide2 be more clear
<ul class="slides">
    <li class="slide slide1">1</li>
    <li class="slide slide2">2</li>
</ul>
// CSS
#slider .slides {
  display: block;
  height: 400px;
  width: 566px; /*total width of both slides*/
  margin: 0;
  padding: 0;
}
.slide1 {
  background-color: red;
  height: 400px;
  width: 266.5px;
}
.slide2 {
  background-color: blue;
  height: 400px;
  width: 266.5px;
}
// JS
setInterval (function(){
  $(slides).animate({'margin-left': '-=266.5px'}, 1000, function(){
    $('.slide').eq(0).appendTo($('#slider .slides'))
    $('#slider .slides').css('margin-left', 0)
  });
}, 3000);

动画结束时我做的只是：

将左侧的消失器移至父母的尾部。
然后制作父

margin-left: 0

所以看起来循环保持无限。

但要小心：

在.animate()的回调函数中，您应该使用之前保存的$('.slide') slide 。因为内存中的jQuery选择器会与事实不同。

以下是完整代码：

＆＃13;

$(document).ready(function(){

var slider = $('#slider'),
    slides = $('#slider .slides'),
    slide = $('.slide'),
    currentSlide = 0;

setInterval (function(){
  $(slides).animate({'margin-left': '-=266.5px' }, 1000, function(){
  $('.slide').eq(0).appendTo($('#slider .slides'))
  $(slides).css('margin-left', 0)
  });

}, 3000);

});

＆＃13;

#slider {
position: relative;
height: 400px;
width: 266.5px;
overflow: hidden; /*hides overflow of child elements*/
margin-top: 100px;
margin-bottom: 100px;
margin-left: 100px;
}

#slider .slides {
  display: block;
  height: 400px;
  width: 566px; /*total width of both slides*/
  margin: 0;
  padding: 0;}

#slider .slide {
  list-style-type: none;
  float: left;
}

.slide1 {
 background-color: red;
 height: 400px;
width: 266.5px;
}
.slide2 {
 background-color: blue;
 height: 400px;
width: 266.5px;
}

＆＃13;

<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<body>
<div id="slider">
    <ul class="slides">
        <li class="slide slide1">1</li>
        <li class="slide slide2">2</li>
    </ul>
</div>
</body>

＆＃13;

Answer 2

你可以检查这些更新，它会完成这项工作，我还添加了一张幻灯片来检查许多幻灯片上的解决方案

滚动到第一张幻灯片有两种方法，我在代码中突出显示了两种方式

＆＃13;

$(document).ready(function(){

var slider = $('#slider'),
    slides = $('#slider .slides'),
    slide = $('.slide'),
    currentSlide = 0;

 setInterval (function(){ 
    currentSlide=currentSlide+1;
    if(currentSlide == slide.length)
    {
        currentSlide=0;  
        /* in case you want the first slide to just pop up un-comment this line
        $(".slides").css('margin-left','0px'); */
        /* in case you want to scroll to the first slide use this */
        $(".slides").animate({'margin-left': '0px' }, 2000);
    }
    else
    {  
      $(".slides").animate({'margin-left': '-=266.5px' }, 2000);
    }
   
  },3000);
  
});

＆＃13;

#slider {
position: relative;
height: 400px;
width: 266.5px;
overflow: hidden; /*hides overflow of child elements*/
margin-top: 100px;
margin-bottom: 100px;
margin-left: 100px;
}

.slides {
  display: block;
  height: 400px;
  width: 799.5px;
  margin: 0;
  padding: 0;}

.slide {
  list-style-type: none;
  float:left;
}

.slide:nth-child(1) {
 background-color: red;
 height: 400px;
width: 266.5px;
}
.slide:nth-child(2) {
 background-color: blue;
 height: 400px;
 width: 266.5px;
}
.slide:nth-child(3) {
 background-color: green;
 height: 400px;
 width: 266.5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="slider">
    <ul class="slides">
        <li id="1" class="slide"><img src="images/img1.jpg" alt="slideone"></li>
        <li id="2" class="slide"><img src="images/img2.jpg" alt="slidetwo"></li>
        <li id="3" class="slide"><img src="images/img3.jpg" alt="slidethree"></li>
    </ul>
</div>

＆＃13;

如何使用JQuery动画回原始图像

2 个答案: