![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
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ランキング
-
ボタンを押すたびに交互に切り...
-
jQueryで表示している所をsubm...
-
JavaScriptでの画像切り替えを...
-
「画像クリックで音声再生」を ...
-
このコードは問題ないでしょうか。
-
パララックスについて 上下に...
-
jQueryで同じクラス名のものを...
-
Javascript初心者|jQueryの.va...
-
デフォルト非表示にしたい。【t...
-
textareaに画像を表示したい
-
MAX関数を使ってからLEFT JOIN...
-
HTMLからimgのsrcのみを正規表...
-
Vb.net2005での画像の合成方法
-
Javascriptで画像を水面のよう...
-
【CSS】floatで左右に並べた...
-
前回の質問の続き
-
jqueryのsortableで一部ソート...
-
removeEventListenerについて
-
<div ~ </div> で囲まれたテキ...
-
画像が表示でnull; this.src
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
デフォルト非表示にしたい。【t...
-
jQueryで同じクラス名のものを...
-
Colorboxがうまく設置できません
-
jQueryでのドラッグアンドドロ...
-
bxsliderで最初に縦に複数表示...
-
Javascript初心者|jQueryの.va...
-
画像マウスオーバーで、checkb...
-
アップロードファイルの種類に...
-
複数bxsliderをタブで切り替え...
-
JavaScriptでの画像切り替えを...
-
サムネイルにカーソルを合わせ...
-
時間差で画像を動作させたいjav...
-
マウスオーバーにて画像に虫眼...
-
「画像クリックで音声再生」を ...
-
JavaScriptでクレイアニメ。ち...
-
クリックでクリッカブルマップ...
-
JQueryでオープニングアニメー...
-
交互に入れ替わる画像を複数配置
-
JavaScript/CANVASでの画像読込...
-
VBAでIEを動かす場合、下記の①...
おすすめ情報