- 締切済み
複数枚画像を表示して一定時間で切り替える方法
画像を表示して一定時間で切り替える方法は別ページに記載されているものをみて出来たのですが、最初に複数枚表示してて、その画像を定時間で切り替えたいのですがご教授願います。 以下別質問で見つけたもの <!-- これを画像を張りたい位置に挿入。<body>～</body>内 --> <script type="text/javascript"> /* 設定部分 */ var interval = 3000; //切り替わる時間（1000=1秒） var imgs = new Array(); var hrefs = new Array(); imgs[0] = new Image(); imgs[0].src = "http://www.xxxxx.net/images/img-main/pake/013.jpg"; hrefs[0] = "http://www.xxxxx.net/moviepages/130923_707_01/index.html"; imgs[1] = new Image(); imgs[1].src = "http://www.xxxxx.net/images/img-main/pake/014.jpg"; hrefs[1] = "http://www.xxxxx.net/moviepages/130906_701_01/index.html"; imgs[2] = new Image(); imgs[2].src = "http://www.xxxxx.net/images/img-main/pake/015.jpg"; hrefs[2] = "http://www.xxxxx.net/moviepages/130830_698_01/index.html"; /* プログラム部分 */ var num = Math.floor(Math.random()*imgs.length); document.write('<a href="'+hrefs[num]+'" id="cth"><img src="'+imgs[num].src+'" id="cti" style="border:0" /></a>'); var cti = document.getElementById("cti"); var cth = document.getElementById("cth"); setInterval(function(){ num += Math.floor(Math.random()*(imgs.length-1))+1; if(num>=imgs.length) num -= imgs.length; cti.src = imgs[num].src; cth.href = hrefs[num]; },interval); </script> <!-- ここまで --> script初心者でよくわかりません＞＜
- pawoonpawoon
- お礼率100% (3/3)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
指定要素の子要素の順番をランダムに入替えるごく単純な例です。 ランダムに入替えているので、同じところに同じものがくる可能性があります。 （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> #test img{ width:200px; height:80px; margin:0; padding:0; } </style> </head> <body> <div id="test"> <img src="img/photo01.jpg" alt=""> <img src="img/photo02.jpg" alt=""> <img src="img/photo03.jpg" alt=""> <img src="img/photo04.jpg" alt=""> <img src="img/photo05.jpg" alt=""> <img src="img/photo06.jpg" alt=""> </div> <script type="text/javascript"> var exChange = (function(){ var targets = function(id){ this.id = id; } targets.prototype.change = function(){ var i, e, items = []; var pa = document.getElementById(this.id); var ch = pa.childNodes; for(i=0; e=ch[i++];) if(e.nodeType == 1) items.push(e); while(items.length){ i = Math.floor(Math.random()*items.length); pa.appendChild(items[i]); items.splice(i, 1); } } return function(id, interval){ var t = new targets(id); setInterval(function(){t.change();}, interval); } })(); exChange("test", 5000); //親要素のid、設定時間 </script> </body> </html>
- k0021
- ベストアンサー率26% (32/120)
参考URLの6・7・8あたりかな ２枚表示して、その画像を一定時間で切り替えていますが
お礼
有難う御座います。早速参考URLをもとに作成してみました。 だいぶイメージに近づきました。
- Br6
- ベストアンサー率64% (9/14)
やりたいことはこういうことですかね？ １～７の７個の画像があるとして、１ページに表示するのは５個とします。 １、２、３、４、５ ↓ ２、３、４、５、６ ↓ ３、４、５、６、７ ↓ ４、５、６、７、１ ↓ ５、６、７、１、２ こんな感じで切り替わっていくというイメージでしょうか？
お礼
イメージはそんな感じなのですが、欲をだせば ランダムにできればと思ってます。 １、２、３、４、５ ↓ ５、１、３、６、４ ↓ ７、２、１、５、３ みたいな不規則で、できるものなのでしょうか？
お礼
有難う御座います。早速上記もとに作成してみます。