jQuery：无限循环动画 - 用于照片幻灯片

Question

我正在尝试创建一个简单的照片幻灯片...但我无法让它无限循环并浏览所有图像（和链接）。

我尝试了一个 for() 函数 http://jsfiddle.net/2TPTX/，也没有它，http://jsfiddle.net/2TPTX/1/ 。但我仍然无法让它正常工作。

你们能帮帮我吗？

它在我提供的小提琴中的代码（http://jsfiddle.net/2TPTX/ 或http://jsfiddle.net/2TPTX/，但为了您的方便，我也将其包含在此处。

HTML：

<div id="slideshow">
    <a id="slideshow_lnk" href="www.mysite.com/some_link_1.html">
    <div id="slideshow_img"></div>
    </a>
</div>

CSS：

#slideshow {
    width: 50px;
    height: 50px;
}
#slideshow_img {
    background-repeat:no-repeat;
    background-size:100% 100%;

    width: 50px;
    height: 50px;
    }

jQuery:

var $slide = $("#slideshow_img");
var $link = $("#slideshow_lnk");

//$photos Array
var $photos = [['photo', 'link']]; //[0] = Header
$photos[1] = ['http://img510.imageshack.us/img510/2497/54208035.jpg', 'http://www.stackoverflow.com/'];
$photos[2] = ['http://img265.imageshack.us/img265/3355/62320763.jpg', 'http://www.google.com/'];
$photos[3] = ['http://img411.imageshack.us/img411/1237/75707805.jpg', 'http://www.yahoo.com/'];

//Loop variables
$photos.count = $photos.length - 1;
var $fade_time = 3500;
var $i = 1;

function slideshow() {
    $i = ($i > $photos.count ? 1 : $i++);
    $photos.css_url = "url('" + $photos[$i][0] + "')";
    $link.attr("href", $photos[$i][1]);

    $slide.fadeOut($fade_time);
    $slide.css("background-image", $photos.css_url);
    $slide.fadeIn($fade_time);
}

slideshow();

Answer 1

jQuery 是异步的， 所以你需要使用它的.queue() 方法来安排下一步在动画完成后发生。我可能会像下面那样做（包括一些你可以接受或忽略的风格变化）。

Here’s a fiddle，如果您有任何问题，请告诉我。

function slideshow($slide, $link, fade_time, images){
    var i = 0;
    function step(next){
        if (i === images.length) {
            i = 0;
        }
        $slide
            .fadeOut(fade_time)
            .queue(function(nextSlide){ return function(next){
                $slide.css("background-image", "url('" + nextSlide.image + "')");
                $link.attr("href", nextSlide.link);
                next();
            }; }(images[i]))
            .fadeIn(fade_time)
            .queue(step);
        i++;
        next();
    }
    $slide.queue(step);
}

var photos = [
    { image: "http://img510.imageshack.us/img510/2497/54208035.jpg", link: "http://www.stackoverflow.com/" },
    { image: "http://img265.imageshack.us/img265/3355/62320763.jpg", link: "http://www.google.com/" },
    { image: "http://img411.imageshack.us/img411/1237/75707805.jpg", link: "http://www.yahoo.com/" }
];

slideshow($("#slideshow_img"), $("#slideshow_lnk"), 3500, photos);

Answer 2

这是一个 JS Fiddle，它可以完成您想要的大部分工作，您可能仍然需要进行一些调整才能完全按照您的意愿进行操作，但这实现了所描述的“无限循环”：http://jsfiddle.net/tGLMF/4/

仅供参考 - 在那个小提琴中，我还更新了你的淡入和淡出功能，在你之前：

$slide.fadeOut($fade_time);
$slide.css("background-image", $photos.css_url);
$slide.fadeIn($fade_time);
$timeout = setTimeout(function(){slideshow(slideNumber+1);}, ( $fade_time * 2) + 1000 );

我将其更新为：

$slide.fadeOut($fade_time, function(){
    $slide.css("background-image", $photos.css_url);
    $slide.fadeIn($fade_time);
    $timeout = setTimeout(function(){slideshow(slideNumber+1);}, ( $fade_time * 2) + 1000 );
});

我这样做的原因是因为动画是异步发生的，所以你调用了fadeOut，但是当它淡出时，你又调用了fadeIn，这引起了一些奇怪的是显示的内容和时间

编辑以显示从图片 1 开始 新小提琴 - http://jsfiddle.net/tGLMF/5/