サイトに横スクロールのスライドを設置したいのですが
横スクロールするスライドショーを作りたくて、ソースを試しているのですが、
用意している画像が流れ終わると空白になってしまいます。
ループさせるにはどうしたらよいですか?
一枚ずつ表示して一枚ずつ横にスクロールするのではなく、回転寿司みたいに自動でゆっくりと画像が流れてゆくものを
探していて、知恵袋でソースを教えてもらいましたが、一度画像が流れきると空白になってしまいます。
下のソースでループの設定ができるのかわかりません。
どなたか解読できる方いましたら教えてください。
<html>
<head><title>test</title>
<style type="text/css">
div#screen, div#screen img { width:300px; height:150px; }
div#screen { overflow:hidden; }
div#screen div { position:relative; width:600px; }
</style>
<script type="text/javascript">
window.onload = function() {
var interval = 30, step = 2;
var e, w, c, i, t = document.getElementById('screen');
e = t.getElementsByTagName('IMG');
if (!e.length) return;
w = t.currentStyle?t.currentStyle['width']:document.defaultView.getComputedStyle(t, null).getPropertyValue('width');
t = e[0].parentNode;
c = t.childNodes;
for (i=c.length-1; i>-1; i--) if (c[i].nodeName != 'IMG') t.removeChild(c[i]);
t.appendChild(e[0].cloneNode(true));
w = parseInt(w)
t.style.width = (w * e.length) + 'px';
c = w * (e.length - 1), w = 0, e = null;
setInterval(function(){
w = (w - step) % c;
t.style.left = w + 'px';
},interval);
}
</script>
</head>
<body>
<div id="screen">
<div>
<img src="A.jpg">
<img src="B.jpg">
<img src="C.jpg">
<img src="D.jpg">
</div>
</div>
</body>
</html>
お礼
あ、ここがそうだったんですね。 ありがとうございます! 福神流は山笠だけでなく、どんたくも出場停止なんですか! 博多にお知り合いがいるなんて、いいですね~。九州は大好きなんですが、なかなか行けなくて残念です。