简单的jquery照片幻灯片 [英] Simple jquery photo slideshow

问题描述

我想编写自己的幻灯片脚本，但最终结果是它会立即跳转到图像6并猛烈地闪烁（淡入淡出）...
HTML只是一个图像id =ss1的页面。

I wanted to write my own slideshow script but the end result is it immediately jumps to image 6 and flashes (fades) violently... The HTML is just a page with an image id="ss1".

var i = 1;

$(document).ready(function(){
    slideShow();
});
var t;
function runSlideShow() {
    if(i >= 7) i = 1;
    $("#ss1").fadeTo("slow",0);
    document.getElementById('ss1').src = "img/" + i + ".jpg";
    $("#ss1").fadeTo("slow",1);
    i += 1;
    t = setTimeout(slideShow(), 5000);  
}

推荐答案

我认为问题在于你使用

t = setTimeout(slideShow(), 5000);

slideShow（）immidiatly再次执行slideShow（）函数。尝试将其替换为：

slideShow() immidiatly executes the slideShow() function again. Try replacing it with:

t = setTimeout('slideShow()', 5000);

。请注意，虽然这使用了eval，它被认为是不安全的（虽然不是这种情况）但速度很慢。

instead. Be aware though that this uses eval, which is considered unsafe(not in this case though) and slow.

淡入淡出无效，因为淡入淡出在代码中异步运行，意思是它在同时淡出时消失（这使得一些奇怪的情况显然发生）。

The fade isn't working because fade runs asynchronous in your code, meaning that it is fading in while it's fading out at the same time(which makes some weird situations happen obviously).

function runSlideShow() {
    if(i >= 7) i = 1;
    $("#ss1").fadeTo("slow",0, function() {
        document.getElementById('ss1').src = "img/" + i + ".jpg";
        $("#ss1").fadeTo("slow",1, function() {
            i += 1;
            t = setTimeout('slideShow()', 5000);
        });
    });  
}

应该有效。由于函数（）{}之间的代码现在将在淡入淡出完成后执行。

should work. Since the code between the function() { } now will execute once the fade has finished.

这篇关于简单的jquery照片幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！