Question

我试图构建一个简单的图像滑块（但使用淡入淡出效果）。每两秒钟，图像应更改为另一个图像。最后，它应该再次调用repeat_sponsor（），重新开始，因此它变成一个循环。

我为5张图片编写了这个（非常无效的）代码。事实证明，我需要约50张图像。当我添加太多代码时，我的编辑器就会冻结。

我尝试使用while循环，但我无法弄清楚如何以正确的方式执行此操作。有谁可以帮我这个？

  function repeat_sponsor()
  {
      $("#sponsor2").hide();
      $("#sponsor3").hide();
      $("#sponsor4").hide();
      $("#sponsor5").fadeOut("slow");
      $("#sponsor1").fadeIn("slow", function() {
          setTimeout(function(){$("#sponsor2").fadeIn("slow", function() {
                    setTimeout(function(){$("#sponsor3").fadeIn("slow", function() {
                              setTimeout(function(){$("#sponsor4").fadeIn("slow", function() {
                                        setTimeout(function(){$("#sponsor5").fadeIn("slow", ...

Answer 1

(function (){

    var cnt = 50;  //set to the last one... 
    var max=50;
    function show() { 
        $("#sponsor" + cnt).fadeOut("slow"); //if you want the fadeout to be done before showing next, put the following code in the complete callback
        cnt++; 
        if(cnt>max) {
            cnt=1; 
        }
        $("#sponsor" + cnt).fadeIn("slow"); 
        window.setTimeout(show, 2000);
    }
    show();
})();

但真正的问题是你从一开始就加载了大量的图像。您最好更改它，这样您只需要一小部分图像并更改源。

Answer 2

您应该使用某种for循环和类来隐藏图像。并添加一个最大值，如果检出重置c＆amp;我

 var i=0;
 var c=1;     
 function repeat_sponsor()
 { 
   $("#sponsor"+i).fadeOut("slow");
   $(".sponsers").hide()
   $("#sponsor"+c).fadeIn("slow", function() {
      window.setTimeout(repeat_sponsor(), 3000);
    }
   i++;
   c++;
 }

Answer 3

只需使用setInterval每两秒运行一次功能，并适当地定位您的不同赞助商div：

var i = 1;
var max = 50;

setInterval(function() {
    // Could target all other sponsor images with a class "sponsor"
    $('.sponsor').fadeOut();

    // Execute code on the target
    $("#sponsor" + i).fadeIn();

    if (i === max) {
        i = 0;
    }

    i++;

}, 2000);

简单的图像循环

3 个答案: