サイトに横スクロールのスライドを設置したいのですが

締切済

質問者：miyuvin
質問日時：2012/06/12 18:20
回答数：2件

横スクロールするスライドショーを作りたくて、ソースを試しているのですが、
用意している画像が流れ終わると空白になってしまいます。

ループさせるにはどうしたらよいですか？

一枚ずつ表示して一枚ずつ横にスクロールするのではなく、回転寿司みたいに自動でゆっくりと画像が流れてゆくものを
探していて、知恵袋でソースを教えてもらいましたが、一度画像が流れきると空白になってしまいます。

下のソースでループの設定ができるのかわかりません。
どなたか解読できる方いましたら教えてください。

<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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： fujillin
回答日時：2012/06/15 08:41

よくわかりませんけど、

ご提示のものって
　#screen { position: relative; }
とかが抜けているのでは？

- 0
- 件

通報する

No.1

回答者： kamepanman
回答日時：2012/06/12 18:37

汚いソースですね（汗

jQueryを使ってもいいのでしたら、こちらはどうでしょうか？
http://black-flag.net/jquery/20110707-3305.html

サンプルもありますし、比較的簡単にできると思いますよ。

参考URL：http://black-flag.net/jquery/20110707-3305.html