画像の配列を与えられた背景画像を置き換えます。

画像がすでにあるdivの背景画像の回転を設定しようとしていますが、何も変更されていないようです。エラーが発生します。画像の配列を与えられた背景画像を置き換えます。

<script> 
    $(document).ready(function() { 
     setInterval(function() { 
     var tips = [ 
     "header.jpg", 
     "header2.jpg", 
     "header3.jpg", 
     "header4.jpg", 
     "header5.jpg", 

     ]; 
     var i = 0; 
     if (i == tips.length) --i; 
    $('.containercoloring').fadeTo('slow', 0.3, function() 
    { 
     $(this).css('background-image', 'url(' + tips[i] + ')'); 
    }).delay(1000).fadeTo('slow', 1); 
    i++; 
    }, 5 * 1000); 
    }); 
    </script> 
    <body> 
    <div class="containercoloring"> </div> 
    </body>

出典

2017-01-12 Pete Hoser

...ヒント）のsetInterval（外（VAR I = 0）カウンターを置くようにしてください：たびhttps://jsfiddle.net/qk2L8L2d/あなたの私は常に、1になりますあなたが関数内でそれを宣言して以来、関数を実行しています（ちょうど最初のインクリメントが機能します）。 – sinisake

以下は、動作中の（更新された）コードです。 jqueryのlibを別々にインポートしたいと思います。

<script> 
    $(document).ready(function() { 
     var i = 0; 
     setInterval(function() { 
      var tips = [ 
       "header.jpg", 
       "header2.jpg", 
       "header3.jpg", 
       "header4.jpg", 
       "header5.jpg" 
      ]; 
      var imageIndex = ++i % tips.length; 
      $('.containercoloring').fadeTo('slow', 0.3, function() { 
       $(this).css('background-image', 'url(' + tips[imageIndex] + ')'); 
      }).delay(1000).fadeTo('slow', 1); 
     }, 5 * 1000); 
    }); 
</script> 

<body> 
    <div class="containercoloring" style="height: 100px;">Image Container</div> 
</body>

あなたはこのjsfiddleでここにテストすることができ

からhttps://jsfiddle.net/nbq9f6bg/

はそれが役に立てば幸い！

出典

2017-01-12 01:40:47

私はあなたの例についていくつかのメモがありました。以下のコメントをご覧ください。私は背景色を使い、より簡単に表示するためにトランジションを削除しました。

// declare variables 
 
var tips = [ 
 
    "#ff9000", 
 
    "#ff0000", 
 
    "#0099ff" 
 
]; 
 

 
// counter 
 
var i = 0; 
 

 
// direction 
 
var direction = 'forwards'; 
 

 
// time in between intervals 
 
var timer = 2000; 
 

 
function changeBackground() { 
 
    // Check the length minus 1 since your counter starts at 0 
 
    if (i == (tips.length - 1)) { 
 
    direction = 'backwards'; 
 
    } else if(i == 0) { 
 
    // only set the direction back to forwards when the counter is 0 again 
 
    direction = 'forwards'; 
 
    } 
 
    $('.containercoloring').css('background-color', tips[i]); 
 
    
 
    // add or subtract based on the direction 
 
    if(direction == 'forwards') { 
 
    i++; 
 
    } else { 
 
    i--; 
 
    } 
 
} 
 

 

 
$(document).ready(function() { 
 
    // save interval to a variable so you can stop it later 
 
    var theInterval = setInterval(changeBackground, timer); 
 
    
 
    // run the function since the interval will take 2000ms to execute 
 
    changeBackground(); 
 
});

.containercoloring { 
 
    height: 100px; 
 
    width: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="containercoloring"> </div>

出典

2017-01-12 01:42:43

画像の配列を与えられた背景画像を置き換えます。

答えて

関連する問題