Jquery 循环错误

Jquery looping error

本文关键字：错误 循环 Jquery      更新时间：2023-09-26

我正在jquery中创建一个滑块，但我不想在那里使用任何插件或existente滑块，所以我在循环中遇到了问题。当我到达最后一个图像时，一个空白的猿猴，它回到第一个图像，然后回到第二个图像，然后再次回到第一个图像，一遍又一遍地重复。

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

.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

如果所有图像的宽度都相同，这有点工作......其他明智的是动画失败。

$(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;"因为它是我最大的照片的大小......它有很多工作要做，但是...希望对您有所帮助。

相关文章：