jquery - 向图像滑块添加更多数组

Question

我正在为我的项目做一个自定义的 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 分钟左右更改一次图像

Answer 1

您可以尝试以下方法： 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="" />

来源：Suprotim Agarwal 使用 jQuery 创建一个简单的图像幻灯片