Question

我在jquery中创建了一个滑块，我不想在那里使用任何插件或存在滑块，所以我遇到了循环问题。当我到达最后一张图像时，一个白色空间出现，然后它返回到第一个图像，然后再回到第一个图像，然后一遍又一遍地重复。

我不知道出了什么问题，所以我希望有人可以帮助我！谢谢Leo！

HTML

<!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Slider</title>
 <link rel="stylesheet" href="slider.css">
 <script src="js/jquery-2.1.4.min.js"></script>
 <script src="slider.js"></script>
 </head>
 <body>
  <div class="slider">
      <ul>
        <li>
          <img src="imagens/imagem1.jpg" alt="Imagem 1" />
        </li>
        <li>
          <img src="imagens/imagem2.jpg" alt="Imagem 2" />
        </li>
        <li>
          <img src="imagens/imagem3.jpg" alt="Imagem 3" />
        </li>
      </ul>
      <!--<button class="prev">prev</button>
      <button class="next">next</button>-->
</div>

CSS

        @charset "utf-8";

        /* desktop */

        @media screen and (min-width: 1025px){

        body{
            margin:0;
            padding:0;
        }

        .slider{
            width:100%;
            height:400px;
            position:realtive;
            overflow:hidden;
            padding:0;
            margin:0;   
        }

        .slider ul{
            width:300%;
            height:100%;
            padding:0;
            margin:0;
        }

        .slider li{
            position:relative;
            float:left;
            display:inline-block;
            width:33.3%;
            height:100%;
            list-style:none;
            padding:0;
            margin:0;   
        }

        .slider img{
            width:100%;
            height:100%;
        }

        }

        /* tablet */

        @media screen and (min-width: 600px) and (max-width: 1024px){
        body{
            margin:0;
            padding:0;
        }

        .slider{
            width:100%;
            height:400px;
            position:realtive;
            overflow:hidden;
            padding:0;
            margin:0;   
        }

        .slider ul{
            width:300%;
            height:100%;
            padding:0;
            margin:0;
        }

        .slider li{
            position:relative;
            float:left;
            display:inline-block;
            width:33.3%;
            height:100%;
            list-style:none;
            padding:0;
            margin:0;   
        }

        .slider img{
            width:100%;
            height:100%;
        }

        }

        /* phone */
        @media screen and (max-width: 599px) {
            body{
            margin:0;
            padding:0;
        }

        .slider{
            width:100%;
            height:200px;
            position:realtive;
            overflow:hidden;
            padding:0;
            margin:0;   
        }

        .slider ul{
            width:300%;
            height:100%;
            padding:0;
            margin:0;
        }

        .slider li{
            position:relative;
            float:left;
            display:inline-block;
            width:33.3%;
            height:100%;
            list-style:none;
            padding:0;
            margin:0;   
        }

        .slider img{
            width:100%;
            height:100%;
        }

        }

的JavaScript

(function(){

AutoPlay();

function AutoPlay(){
    var $img = $('img');
    var $animationSpeed = 1000;
    var $pause = 3000;
    var $totalImg = $img.length;
    var $imgWidth = $img.width();
    var $currentSlide = 1;

    setInterval(function(){
        $img.animate({'margin-left': '-='+$imgWidth}, $animationSpeed, function(){
            $currentSlide++;
            if($currentSlide > $totalImg){
                $currentSlide = 1;
                $img.css({'margin-left': 0});
            }
        }); 
    }, $pause);

} // end AutoPlay function

}); // end main function

Answer 1

如果所有图像的宽度都相同，这种方法就有用了......否则动画会失败。

$(document).ready(function(){   

    var imgs = [
    "img1.jpg",
    "img2.jpg",
    "img3.jpg"

    ];
    var $img = $('#slider');
    var $imgWidth = $img.width();
    var $animationSpeed = 3000;
    var $pause = 0;

    setInterval(function(){
        imgs.forEach(function(imgPath){
            $img.animate({'margin-left': '-='+$imgWidth}, $animationSpeed, function(){
                $img.attr("src", imgPath);
                $img.attr("style","'margin-left: 0");
            });
            $pause = 9000;
        });
    }, $pause, $img);   
 //*** the rest of the code....
});

，图片标记如下所示：

<img id="slider" style="width:500px;" src="img3.jpg" />

style="width:500px;"因为它是我最大的照片... 它有很多工作要做，但......希望它有所帮助。

Jquery循环错误

1 个答案: