2

プロジェクト用にカスタム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分ごとに画像を変更することです

4

1 に答える 1

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="" />

出典：SuprotimAgarwalによるjQueryを使用してシンプルな画像スライドショーを作成する

于 2013-03-22T12:43:20.210 に答える