- 締切済み
サイトに横スクロールのスライドを設置したいのですが
横スクロールするスライドショーを作りたくて、ソースを試しているのですが、 用意している画像が流れ終わると空白になってしまいます。 ループさせるにはどうしたらよいですか？ 一枚ずつ表示して一枚ずつ横にスクロールするのではなく、回転寿司みたいに自動でゆっくりと画像が流れてゆくものを 探していて、知恵袋でソースを教えてもらいましたが、一度画像が流れきると空白になってしまいます。 下のソースでループの設定ができるのかわかりません。 どなたか解読できる方いましたら教えてください。 <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>
- miyuvin
- お礼率0% (0/2)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
よくわかりませんけど、 ご提示のものって #screen { position: relative; } とかが抜けているのでは？
- kamepanman
- ベストアンサー率43% (19/44)
汚いソースですね（汗 jQueryを使ってもいいのでしたら、こちらはどうでしょうか？ http://black-flag.net/jquery/20110707-3305.html サンプルもありますし、比較的簡単にできると思いますよ。
