Question

我被赋予了将Flash动画转换为JQuery的任务。这就是我想要获取我的Jquery代码，这里是flash动画：http://www.thedesigncommonwealth.com/durangoSlideshow.html。

这是我到目前为止的Jquery：http://www.lisa.netii.net/test-for-durango.html

我首先在左侧工作，只是试图让它在另一侧移动之前正常工作，时间在双方之间非常重要，我认为我的代码到目前为止可能能够处理那。查看Jquery版本时有几个明显的问题。首先，我遇到了fadeIn效果问题。即使我使用.hide效果，除了第一张图像之外的所有图像都会弹到屏幕上。我已尝试在每个div的每个Jquery功能行中使用.hide，它似乎只适用于第一个图像，所有其他图像仍然只是弹出到屏幕上。

第一张幻灯片也有问题。目前html中的＃slide2应该是slide1，但由于某些原因，动画开始在slide2上运行，而＃slide1上没有任何反应，所以我将＃slide1更改为＃slide2，但这显然不是一个好的修复。我可以一步一步......

有谁能告诉我我能做些什么来解决fadeIn问题？这是我的Jquery代码：

$("#slide1").hide().fadeIn(200).delay(3000).fadeOut(4000);
var t2 = setTimeout(function(){
    $("#slide2").hide().fadeIn(4000).delay(5000).fadeOut(4000);
    var t3 = setTimeout(function(){
        $("#slide3").hide().fadeIn(4000).delay(10000).fadeOut(4000);
        var t4 = setTimeout(function(){
            $("#slide4").hide().fadeIn(4000).delay(5000).fadeOut(4000);
            var t5 = setTimeout(function(){        
                $("#slide5").hide().fadeIn(4000);
            }, 6500);
        }, 11500);
    }, 6500);
}, 6500);

要查看css和html，请参阅jquery网站链接。

非常感谢您的帮助！

Answer 1

试试这个：

var numberOfImages = 5;
var fadeInSpeed = 200;
var fadeOutSpeed = 200;
var pause = 6500;

function startSlideImage(index) {
   jQuery('#slide'+index).hide().fadeIn(200, function(){
      jQuery(this).delay(3000).fadeOut(fadeOutSpeed, function(){
         setTimeout(function(){
            startSlideImage(index+1);
         }, pause);
      });
   });
}

startSlideImage(1);

要添加不同的延迟时间，您可以将此数据写入类属性，如：

<div id="slide1" class="delay-3000">...</div>

或任何其他未使用的属性和w3c-konform。但是class-Attribute在我看来是最好的。如果class-Attribute具有其他值，则可以按空格.split（''）拆分并捕获索引。

之后你可以用：

读出延迟

var delay = parseInt(jQuery('#slide1').attr('class').replace('delay-',''), 10);

所以你的功能应该是这样的：

function startSlideImage(index) {
   jQuery('#slide'+index).hide().fadeIn(200, function(){
      var delay = parseInt(jQuery('#slide1').attr('class').replace('delay-',''), 10);
      jQuery(this).delay(delay).fadeOut(fadeOutSpeed, function(){
         setTimeout(function(){
            startSlideImage(index+1);
         }, pause);
      });
   });
}

JQuery淡出问题

1 个答案: