jqueryで背景スライドショーを作成するには？

私のウェブサイトの背景に5秒ごとに画像を変更したい。そのためにjqueryスクリプトを作成します。問題は、画像がフルハイトでもフルワイドでもないことです。もう一つは、背景が気づかれることなく、イメージをフェードアウトさせることができないということです。誰でも助けてくれますか？jqueryで背景スライドショーを作成するには？

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(window).load(function() {   
     var i =0; 
     var images = ['geral2.jpg','geral3.jpg','geral4.jpg','geral5.jpg','geral6.jpg']; 
     var image = $('#slideit'); 
     image.css('background', 'url(geral1.jpg) no-repeat center center fixed'); 
     setInterval(function(){   
      image.fadeOut(1000, function() { 
      image.css('background', 'url(' + images [i++] +') no-repeat center center fixed'); 
      image.fadeIn(1000); 
      }); 
      if(i == images.length) 
       i = 0; 
     }, 5000);    
    }); 
</script> 
</head> 
<body> 
     <div id="slideit" style="width:100%;height:100%; background-size: cover; -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover;"> 
     </div> 
</body> 
</html>

更新：フルスクリーンですが、最初の画像がループしています。どうすれば解決できますか？ setIntervalインサイド

http://codepen.io/Ryuh/pen/oLNvRj

出典

2016-05-27 João Rodrigo Castro

なぜ、1つのdivで作成しますか？異なる背景の代わりに、それらの背景とそれらをアニメートする別々のdivを保持すると、はるかに簡単で便利になります。 –

http://codepen.io/mblase75/pen/wWvvjY - 私がしなければならなかった唯一の真の変更は、 'html、body {height：100％; } 'をCSSに渡します。なぜなら、'＃slideit'には、それに高さを与える内容がないからです。 – Blazemonger

それはできませんでした、画像はフルスクリーンではありません。私は何をしたのかわからない –

、私たちはbackground-imageの代わりbackground自体を上書きする必要があります。これにより、フルスクリーンの問題が修正されるはずです。

image.css('background-image', 'url(' + images [i++] +')');

出典

2016-05-27 13:30:31 dinesh

それは働いたが、それは最初の画像をループしている –

実際に私はcodepenでホストされているコードを試して、期待どおりに動作します。私は最初のイメージのループの問題は表示されません。ブラウザ固有の問題ですか？現在の行の隣に 'i ++'を実行してみてください。私は連結と増分演算子が互いに干渉しないと信じています。 – dinesh

jqueryで背景スライドショーを作成するには？

答えて

関連する問題