No.1ベストアンサー
- 回答日時:
探せばライブラリがたくさんありそうな気がしますが…
intervalとstepの数字を変えると速度がかわります。
<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>
この回答へのお礼
お礼日時:2010/02/10 00:00
ありがとうございます。
多機能なのはいっぱい見つかったのですが、ほんとうにシンプルなのが見つからずに困っていました。
助かりました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- ノートパソコン パソコンでスライドショーの画面に時計を表示させたい。 5 2022/09/22 15:00
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- Excel(エクセル) Excelでマウスを使って横スクロールしたい 7 2022/06/07 17:56
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- ノートパソコン サブスクの音楽はパソコンに保存されない?スライドショーの音源にできない? 3 2022/09/24 16:54
- PowerPoint(パワーポイント) 発表者ツール 2 2022/12/26 00:08
- 結婚式・披露宴 著作権フリーとは? 3 2022/09/03 00:48
- PDF Macでpdfをスライドショー 2 2022/08/19 17:14
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
複数bxsliderをタブで切り替え...
-
一定時間で入れ替わるバナー画...
-
指定時間経過後に画像を一定時...
-
jacascriptで作ったドロップダ...
-
下記のようなタグの場合、VBAで...
-
jQueryで同じクラス名のものを...
-
MAX関数を使ってからLEFT JOIN...
-
JSPでの画像ファイル表示
-
jqueryのsortableで一部ソート...
-
c++std::string型をTCHARに変換...
-
jspでcssが読み込めない
-
javascriptテキストBOX色を元に...
-
JavaScriptで、?マークとコロ...
-
画像ランダム表示、しかしダブ...
-
変数名をどのようにつけるのが...
-
jQueryで画像を重ねる
-
textareaで入力した文字を改行...
-
CSS <div>の入れ子が反映さ...
-
htmlの記述で link rel=styles...
-
サイトの背景色をグラデーショ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
デフォルト非表示にしたい。【t...
-
jQueryで同じクラス名のものを...
-
Colorboxがうまく設置できません
-
Javascript初心者|jQueryの.va...
-
jQueryでのドラッグアンドドロ...
-
アップロードファイルの種類に...
-
embed要素のsrc属性の値を変更...
-
fancyboxのポップアップ時の画...
-
JQueryで画像の上で文字を動かす
-
一定時間で入れ替わるバナー画...
-
ボタンを押すたびに交互に切り...
-
交互に入れ替わる画像を複数配置
-
全部のサイコロをjavascriptで...
-
clear機能を失わずにファイルア...
-
JavaScriptが、Firefoxで動かな...
-
bxsliderで最初に縦に複数表示...
-
「画像クリックで音声再生」を ...
-
画像マウスオーバーで、checkb...
-
イラストのボタンを押したとき...
-
背景色と連動するスライドショ...
おすすめ情報