问题与JQuery滑块

我做了一个滑块使用Jquery的功能正常，但只要它到达最后一张幻灯片，它不会滑过第一个幻灯片，而是它只是瞬间显示第一张幻灯片。即使是一秒钟也不会停留在最后一张幻灯片上。问题与JQuery滑块

HTML：

<body> 
    <div id="container"> 
     <div id="header"> 
      <h3>J-Slider</h3> 
     </div> 
     <div class="slider"> 
      <ul> 
       <li> 
        <img width="750px" height="400px" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/04/space-wallpapers-1.jpg"> 
       </li> 
       <li> 
        <img width="750px" height="400px" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/04/space-wallpapers-13.jpg"> 
       </li> 
       <li> 
        <img width="750px" height="400px" src="http://th08.deviantart.net/fs70/PRE/f/2014/071/5/5/blue_space_by_whendell-d79zabi.jpg"> 
       </li> 
      </ul> 
     </div> 
    </div> 
</body>

CSS：

body { 
    font-family:Gerogia; 
    font-size:15px; 
} 
#container { 
    width:930px; 
    margin:50px auto 10px auto; 
    border-left:#666 solid 3px; 
    border-right:#666 solid 3px; 
    background:#f5f5f5; 
    padding:20px 30px; 
} 
#header { 
    padding:10px 0; 
    border-bottom:#ccc solid 1px; 
    overflow:hidden; 
    text-align:center; 
} 
h3 { 
    font-size: 30px; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
} 
.slider { 
    width: 750px; 
    height: 400px; 
    padding-top: 10px; 
    margin-left: 75px; 
    overflow: hidden; 
} 
.slider ul { 
    width:8000px; 
    list-style-type:none; 
} 
.slider li { 
    float: left; 
}

JQuery的：

$('document').ready(function() { 
    var width = 750; 
    var animationSpeed = 1000; 
    var pause = 3000; 
    var currentSlide = 1; 

    var $slider = $('.slider'); 
    var $slideContainer = $slider.find('ul'); 
    var $slides = $slideContainer.find('li'); 

    setInterval(function() { 
     $slideContainer.animate({ 
      'margin-left': '-=' + width + 'px' 
     }, animationSpeed, function() { 
      currentSlide++; 
      if (currentSlide === $slides.length) { 
       currentSlide = 1; 
       $slideContainer.css('margin-left', 0); 
      } 
     }); 
    }, pause); 
});

来源

2014-07-14 DineshS

它应该像它那样自动滑动，还是要点击功能？你想让幻灯片回到第一张图片，还是想让最后一张图片淡出，然后第一张图片再次淡入？没有更多信息很难提供帮助 – Izekid

请检查jsfiddle的代码。或以下代码

也许你的解决方案。

$('document').ready(function() { 
var width = 750; 
var animationSpeed = 1000; 
var pause = 3000; 
var currentSlide = 1; 

var $slider = $('.slider'); 
var $slideContainer = $slider.find('ul'); 
var $slides = $slideContainer.find('li'); 

setInterval(function() { 
    $slideContainer.animate({ 
     'margin-left': '-=' + width + 'px' 
    }, animationSpeed, function() { 
     currentSlide++; 
     if (currentSlide === $slides.length) { 
      currentSlide = 1; 
      //$slideContainer.css('margin-left', 0); 
      $slideContainer.animate({ 'margin-left': 0 


}, pause); 
       } 
      }); 
     }, pause); 
    });

来源

2014-07-14 12:33:42

谢谢。但是有什么办法可以让滑块停留在最后一张图片上几秒钟（比如2秒）。正如您在看到最后一张图片时所看到的那样，它立即滑回第一张图片。我尝试了delay（）函数，但它与第一张幻灯片动画的时间混淆。 – DineshS

@DineshS请检查此链接[jsfiddle]（http://jsfiddle.net/prashantptapase/ymFQR/26/）。第三次滑动，停止3秒。 –

@DineshS试试这个[jsfiddle]（http://jsfiddle.net/prashantptapase/ymFQR/27/） –

尝试改变如何以及何时增加幻灯片，当你重置为一个。在当前的JS，你递增到最后一张幻灯片，然后告诉它回到一个马上

$('document').ready(function() { 
    var width = 750; 
    var animationSpeed = 1000; 
    var pause = 3000; 
    var currentSlide = 1; 

    var $slider = $('.slider'); 
    var $slideContainer = $slider.find('ul'); 
    var $slides = $slideContainer.find('li'); 

    setInterval(function() { 
    $slideContainer.animate({ 
     'margin-left': '-=' + width + 'px' 
    }, animationSpeed, function() { 
     if (currentSlide === $slides.length) { 
      currentSlide = 1; 
      $slideContainer.css('margin-left', 0); 
     } else { 
      currentSlide++; // move this down here 
     } 
    }); 
}, pause); 
});

来源

2014-07-14 12:18:58 mmeasor

我不是在Javascript亲，但我认为我想通你的问题。

当您制作动画时，您执行currentSlide ++，并且在您执行检查（currentSlide == $ slides）之后，您将迭代currentSlide，然后在您告诉他更改为第一个之后。正如之前所说的mmseasor一样。

对于你不回头的问题是因为在if循环中的动作中你忘了给slideContainer设置动画，所以它只显示。

来源

2014-07-14 12:23:28 Lucas

我改变你的代码了一下，我把第一个元素的副本在最后的位置，并修改你的代码有点

$('document').ready(function() { 
    var width = 750; 
    var animationSpeed = 1000; 
    var pause = 3000; 
    var currentSlide = 1; 

    var $slider = $('.slider'); 
    var $slideContainer = $slider.find('ul'); 
    var $slides = $slideContainer.find('li'); 

    setInterval(function() { 
     $slideContainer.animate({ 
      'margin-left': '-=' + width + 'px' 
     }, animationSpeed, function() { 
      currentSlide++; 
      if (currentSlide >= $slides.length) { 
       currentSlide = 1; 
       $slideContainer.css('margin-left', 0); 
      } 
     }); 
    }, pause); 
});

变化

if (currentSlide === $slides.length)

要：

if (currentSlide >= $slides.length)

举例：jsFiddle

更新：问题与图像边框左侧

为了让所有的工作我修改你的CSS（放左旁UL为0px）

.slider ul { 
    width:8000px; 
    list-style-type:none; 
    padding-left: 0px 
}

更新的jsfiddle： jsFiddle

来源

2014-07-14 12:43:50 Steven

问题与JQuery滑块

回答

相关问题