Javascript jQuery循环图像淡出/淡入时间间隔

我有一个jQuery函数来淡入/淡出div中的图像。但是当该函数到达最后一个图像时，它就会停止。以任何方式将其放入循环中，以便在最后一个图像结束时，它将从第一个图像重新开始。 这是密码

HTML:

---

有没有可能？提前感谢。

首先，您将函数作为字符串传递，这是不允许的。我认为您的代码过于复杂，您可以利用jQuery的一些效率

首先，我认为没有必要修改图像的z索引：淡入应该可以处理所有这些。其次，您可以链接jQuery调用（参见下面的如何链接

fadeIn

和

addClass

chained）。最后，每次执行

$（'.activeimage'）

，jQuery都必须再次扫描DOM，这是低效的。最好只做一次并缓存答案（每当我存储jQuery对象时，我都以美元符号开始，所以我总是知道我在处理jQuery包装的对象）

下面是我将如何重新编写的：

$(document).ready(function(){
    $('#homeimg img:first-child').addClass('activeimg');
    setInterval(cycleMe, 4000);
});

function cycleMe() {
    var $active = $('#homeimg .activeimg');
    var $next = $active.next('img');
    if(!$next.length) $next = $('#homeimg img:first-child');

    $active.fadeOut(1500, function(){
        $(this).removeClass('activeimg');
        $next.fadeIn().addClass('activeimg');
    });
 }

---

使用JSFIDLE:

您还可以通过简单的数组操作来实现这一点：

$(document).ready(function () {
   $('#homeimg img:first-child').addClass('activeimg');
   setInterval(cycleMe, 4000);
   // get an array of your images
   var arrImgs = $('#homeimg img');

   function cycleMe() {
       var currImg = arrImgs[0];
       var nextImg = arrImgs[1];
       // You can do this with simple array splicing and pushing
       $(nextImg).css('z-index', 10);
       $(nextImg).fadeIn(1500);
       $(currImg).fadeOut(1500, function () {
           $(nextImg).fadeIn(0);
           $(this).css('z-index', 5);
           // remove the first item from the array
           arrImgs.splice(0,1);
           // add it to the end of the array
           arrImgs.push(currImg);
       });
   }
});

jsFiddle：

考虑到Ethan的一些评论，我也试着这样做：

---

在我之前的尝试中，我不得不重新查询DOM的css更改和fadeIn。。。效率低下。缓存jQuery对象，/然后/执行操作，并像Ethan的方法那样使用sans-z-index。对于无限循环中的每个元素，我还是不必重新查询DOM。如果我能找到解决方法，我也会发布它。

不要将函数作为字符串传递，这样效率很低。谢谢你指出它。我是js的初学者。我不明白为什么效率很低。OP说他们想要一个循环，所以它会无限重复。啊，你说得对。我应该读得更仔细些！我会马上更正。谢谢你的回复。我把你的代码放在这里——它会做一个循环，但是在显示最后一张图像后，它会有一些时间重新开始。@ethanbrown@mori57的一个代码工作了。虽然这是不同的方式，它肯定会帮助我。谢谢你花时间回答我的问题。同样的效果，真的。我觉得我的代码比mori57的代码更紧凑/更易于维护，但有时，这都是关于第一件可以工作的事情！有些时候，你只想让它工作，然后回家：）

$(document).ready(function(){
    $('#homeimg img:first-child').addClass('activeimg');
    setInterval(cycleMe, 4000);
});

function cycleMe() {
    var $active = $('#homeimg .activeimg');
    var $next = $active.next('img');
    if(!$next.length) $next = $('#homeimg img:first-child');

    $active.fadeOut(1500, function(){
        $(this).removeClass('activeimg');
        $next.fadeIn().addClass('activeimg');
    });
 }

$(document).ready(function () {
   $('#homeimg img:first-child').addClass('activeimg');
   setInterval(cycleMe, 4000);
   // get an array of your images
   var arrImgs = $('#homeimg img');

   function cycleMe() {
       var currImg = arrImgs[0];
       var nextImg = arrImgs[1];
       // You can do this with simple array splicing and pushing
       $(nextImg).css('z-index', 10);
       $(nextImg).fadeIn(1500);
       $(currImg).fadeOut(1500, function () {
           $(nextImg).fadeIn(0);
           $(this).css('z-index', 5);
           // remove the first item from the array
           arrImgs.splice(0,1);
           // add it to the end of the array
           arrImgs.push(currImg);
       });
   }
});

$(document).ready(function () {
    $('#homeimg img:first-child').addClass('activeimg');
    setInterval(cycleMe, 4000);
    // get an array of your images
    var arrImgs = $('#homeimg img');

    function cycleMe() {
        var currImg = $(arrImgs[0]);
        var nextImg = $(arrImgs[1]);
        // You can do this with simple array splicing and pushing
        nextImg.fadeIn(1500);
        currImg.fadeOut(1500, function () {
            currImg.removeClass('activeimg');
            nextImg.fadeIn(0).addClass('activeimg');
            // remove the first item from the array
            arrImgs.splice(0,1);
            // add it to the end of the array
            arrImgs.push(currImg);
        });
    }
});