横スクロールするスライドショーを作りたくて、ソースを試しているのですが、
用意している画像が流れ終わると空白になってしまいます。
ループさせるにはどうしたらよいですか?
一枚ずつ表示して一枚ずつ横にスクロールするのではなく、回転寿司みたいに自動でゆっくりと画像が流れてゆくものを
探していて、知恵袋でソースを教えてもらいましたが、一度画像が流れきると空白になってしまいます。
下のソースでループの設定ができるのかわかりません。
どなたか解読できる方いましたら教えてください。
<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で質問しましょう!
似たような質問が見つかりました
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jQueryで同じクラス名のものを...
-
jQueryでのドラッグアンドドロ...
-
デフォルト非表示にしたい。【t...
-
clear機能を失わずにファイルア...
-
MAX関数を使ってからLEFT JOIN...
-
CSS のみのタブ切り替えについて
-
createElementで作成した要素を...
-
[急ぎ] videoタグで埋め込んだm...
-
jqueryで要素の中身を要素の外...
-
スクロール可能なチェックボックス
-
jspでcssが読み込めない
-
eclipseでcssを使うためには?
-
htmlの記述で link rel=styles...
-
アコーディオン自動開閉メニュ...
-
SimplyScrollについて
-
JQuery UIで、表示したタブの中...
-
divのheight指定で画面一杯に表...
-
【初心者】UWSCでjavascriptで...
-
チェックボックスに入っている...
-
jQueryアコーディオンで複数メ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
デフォルト非表示にしたい。【t...
-
jQueryで同じクラス名のものを...
-
Colorboxがうまく設置できません
-
Javascript初心者|jQueryの.va...
-
jQueryでのドラッグアンドドロ...
-
アップロードファイルの種類に...
-
embed要素のsrc属性の値を変更...
-
fancyboxのポップアップ時の画...
-
JQueryで画像の上で文字を動かす
-
一定時間で入れ替わるバナー画...
-
ボタンを押すたびに交互に切り...
-
交互に入れ替わる画像を複数配置
-
全部のサイコロをjavascriptで...
-
clear機能を失わずにファイルア...
-
JavaScriptが、Firefoxで動かな...
-
bxsliderで最初に縦に複数表示...
-
「画像クリックで音声再生」を ...
-
画像マウスオーバーで、checkb...
-
イラストのボタンを押したとき...
-
背景色と連動するスライドショ...
おすすめ情報