将更多阵列添加到图像滑块

我正在为我的项目做一个自定义jQuery滑块。一个相当基本的应该只更新图像。但我的问题很少。将更多阵列添加到图像滑块

1 - 我不知道如何在一个阵列

2添加一个以上的图像 - 的过渡似乎有点奇怪

下面是代码+的jsfiddle

 #background { 
     width: 960px; 
     height: 480px; 
     background: transparent url(http://i.imgur.com/pSo3Nmg.jpg) no-repeat top center; 
     background-size: cover; 
     display: block; 
     } 

var image = $('#background'); 
       image.fadeOut(3000, function() { 
        image.css("background", "url('http://i.imgur.com/So7hhTG.png')"); 
        image.css("background-size", "cover"); 
        image.fadeIn(3000); 
      });

http://jsfiddle.net/SxN8g/

我想要做的是每2分钟左右通过fadeIn/fadeOut改变图像

来源

2013-03-22 Random

你可以尝试以下方法： JSFiddle

var images = [ 
        'http://i.imgur.com/So7hhTG.png', 
        'http://i.imgur.com/pSo3Nmg.jpg' 
       ]; 
    var cnt = images.length; 

    $(function() { 
     setInterval(Slider, 3000); 
    }); 

    function Slider() { 
     $('#imageSlide').fadeOut("slow", function() { 
      $(this).attr('src', images[(images.length++) % cnt]).fadeIn("slow"); 
     }); 
    }

HTML：

<img id="imageSlide" alt="" src="" />

来源：Create a Simple Image Slide Show using jQuery by Suprotim Agarwal

来源

2013-03-22 12:43:20 chridam

哦，整齐的作品。但是有没有办法把它放到一个循环中呢？ – Random 2013-03-22 12:49:15

是的，更新的答案应该反映循环动画的变化。最初包含一个未定义的变量'imgs'，它正在破坏代码，现在正在工作。脚本功能可以动态适应阵列中图像的数量。 – chridam 2013-03-22 13:22:33

将更多阵列添加到图像滑块

回答

相关问题