0

http://jsfiddle.net/MAaVV/

上記は私のコードの JSFiddle です。画像を全画面表示にする CSS と、画像の単純な src の変更です。画像の背景を 5 秒ごとに変更したい。以下にもあります。

<STYLE type=text/css>
#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}
</style>

<script type="text/javascript">

for(var x = 0; x < 2; x++)
{
    setTimeout(function()
    {
        var imgs = ["http://www.hdwallpapers.in/walls/aprilia_rsv4_motorcycles-wide.jpg","http://chivethethrottle.files.wordpress.com/2012/12/user-girl-motorcycle-920-3.jpg","clf.jpg"];
        document.getElementById("img").src = imgs[x];
    },5000);
}
</script>

<div id="bg">
  <img id="img" src="http://chivethethrottle.files.wordpress.com/2012/12/user-girl-motorcycle-920-3.jpg?w=919&h=613" alt="" />
</div>

なぜ機能しないのか誰にもわかりますか？

スライドショーの最後の画像が 5 秒間表示された後に (別の Web サイトへの) リダイレクトを構築するためのボーナス ポイント。

4

3 に答える 3

1

これを試して：

var imgs = ["http://www.hdwallpapers.in/walls/aprilia_rsv4_motorcycles-wide.jpg", "http://chivethethrottle.files.wordpress.com/2012/12/user-girl-motorcycle-920-3.jpg"]; 
var i=0;
setInterval(function () {        
    document.getElementById("img").src = imgs[i];
    if(i==1)
    {
        //alert('test');
        $("#img").click(function(){
            alert('on');
            location.href='http://www.google.com';
        });
    }
    if(i++>=1) i=0;   
}, 5000);

フィドル: http://jsfiddle.net/MAaVV/6/

于 2013-03-12T06:53:49.577 に答える
1

コードは次の 2 つの理由で失敗します。

  1. 3 つすべて (jsFiddle の場合は 2 つ) のタイムアウトを同時に実行するように設定します。コードでは、呼び出しの 5 秒後に 3 つすべてが実行されるように設定されていますが、すべての呼び出しが同時に行われるため、すべての呼び出しが 5 秒後に実行されます。
  2. タイムアウト関数で変数を使用していxますが、その関数のスコープで定義されていません。したがって、すべての場合において、画像は src として「未定義」になります。

これを修正するには、次のようなものを使用します。

<script type="text/javascript">
var imageIndex = 0;
var imgs = ["http://www.hdwallpapers.in/walls/aprilia_rsv4_motorcycles-wide.jpg","http://chivethethrottle.files.wordpress.com/2012/12/user-girl-motorcycle-920-3.jpg","clf.jpg"];


setInterval(function(){
    document.getElementById("img").src = imgs[imageIndex++];
    if(imageIndex >= imgs.length) imageIndex = 0;
    },5000);
</script>

http://jsfiddle.net/MAaVV/5/

編集：すべてのスライドが表示された後に関数に何かをさせるには、次のようなことを試してください：

<script type="text/javascript">
var imageIndex = 0;
var imgs = ["http://www.hdwallpapers.in/walls/aprilia_rsv4_motorcycles-wide.jpg","http://chivethethrottle.files.wordpress.com/2012/12/user-girl-motorcycle-920-3.jpg","clf.jpg"];

var interval = setInterval(function(){
    document.getElementById("img").src = imgs[imageIndex++];
    if(imageIndex >= imgs.length){
        clearInterval(interval);
        setTimeout(function(){
            // do whatever you want here, after a 5 second pause
        },5000);
},5000);
</script>
于 2013-03-12T06:59:46.460 に答える