jquery / javascript图片幻灯片

时间:2011-10-09 21:44:10

标签: javascript jquery

我正在为我的网站制作一个简单的(至少我认为是)图像幻灯片。 我是jquery和javascript的新手,所以我的脚本可能有点狡猾。这是代码:

$(function(){

var images = ["images/animal_full_2.jpg","images/church_full_1.jpg", "images/city_full_2.jpg", "images/faith_full_1.jpg", "images/flower_full_2.jpg", "images/gloom_full_2.jpg"];

function swapImages()
    {

        images=0;
        $("#"+images).fadeOut(2000,function(){
            (this).attr('src',++images).fadeIn(2000,function(){
                setTimeout(swapImages(),2000)
            });


        });

    }

});

现在,我试图实现的是幻灯片放映,以便阵列中的图像定期更改,然后又重新开始,但这就是您可以看到的情况(请注意,通过包含URL我我不是试图宣传我的网站,而只是简单地说明脚本是如何工作的): http://antobbo.webspace.virginmedia.com/photogallery/testscript/home.htm 图像全部显示在主页上。 有没有人对如何使它工作有任何建议? 非常感谢

1 个答案:

答案 0 :(得分:0)

到目前为止,你有什么问题,所以也许你只是看到一个有效的例子会更容易。这应该适用于您的文档:

$(function() {
    var imgs = $('.home_page_pic img').hide(), index = 0;

    imgs.eq(index).show();

    function swapImages() {
      imgs.eq(index).fadeOut(2000, function(){

        index++;
        if (index == imgs.length) {
          index = 0;
        }
        imgs.eq(index).fadeIn(2000, swapImages);
      });
    }

    swapImages();
});