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

这是一个完成你想要的大部分内容的JS小提琴，你可能仍然需要进行一些调整才能完全按照自己的意愿行事，但这样就完成了所谓的“无限循环”：http://jsfiddle.net/tGLMF/4/

仅供参考 - 在那个小提琴中我还会更新你的fadein和fadeout功能，然后才能：

$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/

Answer 2

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);

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

2 个答案: