以下のスクリプトを変更して、少数のテキスト DIV をスライドショー/回転させようとしています。
これらの DIV を順番に表示する必要があります: div 1、次に div 2、次に div 3。それぞれが 5 秒間表示され、次の div が表示されますが、順番に表示されます。
以下のスクリプトはランダムな div ではうまく機能しますが、毎回 div 1、div 2、div 3... という順序で配置する必要があります。
コード:
<div id="d1" style="display:none;">some text 1</div>
<div id="d2" style="display:none;">some text 2</div>
<div id="d3" style="display:none;">some text 3</div>
<script type="text/javascript">
divs = ['d1','d2','d3'];
function hideDivs() {
for (var i=0; i<divs.length; i++)
document.getElementById(divs[i]).style.display = 'none';
}
function showDiv() {
hideDivs(); //hide them all before we show the next one.
var randomDiv = divs[Math.floor(Math.random()*divs.length)];
var div = document.getElementById(randomDiv).style.display = 'block';
setTimeout(showDiv,500); //set a delay before showing the next div
}
showDiv();
</script>
3 つのテキストベースの DIV タグを順番にローテーションしようとしています。
- Div 1 が 5 秒間表示されます...
- その後、Div 2 が 5 秒間表示されます...
- その後、Div 3 が 5 秒間表示されます...
私が投稿したスクリプトは、これらの DIV タグをランダムにローテーションします。スクリプトは機能しますが、必要なことを実行できるように微調整する必要があります。
div 1、div 2、div 3 をランダムにではなく、この順序で表示するスクリプトが必要です。
その方法がわかりません。