
横スクロールするスライドショーを作りたくて、ソースを試しているのですが、
用意している画像が流れ終わると空白になってしまいます。
ループさせるにはどうしたらよいですか?
一枚ずつ表示して一枚ずつ横にスクロールするのではなく、回転寿司みたいに自動でゆっくりと画像が流れてゆくものを
探していて、知恵袋でソースを教えてもらいましたが、一度画像が流れきると空白になってしまいます。
下のソースでループの設定ができるのかわかりません。
どなたか解読できる方いましたら教えてください。
<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>
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
汚いソースですね(汗
jQueryを使ってもいいのでしたら、こちらはどうでしょうか?
http://black-flag.net/jquery/20110707-3305.html
サンプルもありますし、比較的簡単にできると思いますよ。
参考URL:http://black-flag.net/jquery/20110707-3305.html
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ボタンを押すたびに交互に切り...
-
Javascript初心者|jQueryの.va...
-
VBAでIEを動かす場合、下記の①...
-
fancyboxのポップアップ時の画...
-
c++std::string型をTCHARに変換...
-
MAX関数を使ってからLEFT JOIN...
-
JSPでの画像ファイル表示
-
javascriptテキストBOX色を元に...
-
文字をクリックしたら別の文字...
-
ネストされたチェックボックス...
-
createElementが一瞬で消えてし...
-
ダイアログから画像ファイルは...
-
表示・非表示のスクリプトで、...
-
error LNK2019 未解決のシンボ...
-
MFCで画像を表示させているので...
-
スライダーの枠に動画を収める...
-
CSSで背景を下までのばすには?
-
スクロール可能なチェックボックス
-
【jQuery】2分割レイアウトで、...
-
jqueryを使って無駄なspanタグ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jQueryで同じクラス名のものを...
-
Javascript初心者|jQueryの.va...
-
デフォルト非表示にしたい。【t...
-
javascript ランダム表示
-
ホームページ作成で画像スクロ...
-
JavaScript - 月ごとに画像変化
-
HTMLへ要素の挿入について
-
animateを使用したマウスオーバ...
-
IMGタグごとにCSSを設定する方法
-
一定時間で入れ替わるバナー画...
-
embed要素のsrc属性の値を変更...
-
アニメーションをループさせたい
-
jqueryを使用した画像スクロー...
-
clear機能を失わずにファイルア...
-
jQueryでセレクタに複数のIDを...
-
イラストのボタンを押したとき...
-
吹き出しに画像とコメントを入...
-
セレクトボックスで、リンクバ...
-
Jquery cheeckbox(複数)とsli...
-
複数bxsliderをタブで切り替え...
おすすめ情報