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/

我要做的是通过fadeIn / fadeOut每隔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="" />

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

向图像滑块添加更多数组

1 个答案: