- ベストアンサー
jqueryのスライドショー実現方法
- jqueryを使ったスライドショーの実現方法について教えてください。IEとFirefox、Chorome、Safariで同様の動作をさせたいです。
- 画像の読み込みが重くならないようにするために、900px×400pxのJPG画像を使用し、15枚の画像をランダムに表示させたいです。
- また、初めに表示される画像は15枚中の1枚をランダムに選択し、2枚目と3枚目もランダムに選択する方法について教えてください。
- tekkenman7
- お礼率70% (150/212)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <style> #sample { margin: 0px; padding: 0px; width: 900px; height: 400px; float: left; position: relative; } #sample img { position: absolute; left: 0; top: 0; display:none; } </style> <script src="jquery.js"></script> <script> var img_num = 15; var fade_time = 2000; var show_time = 5000; $(function() { var num = Math.floor(Math.random()*img_num); $("img","#sample").eq(num).fadeIn(fade_time); setTimeout("change(" + num + ")",show_time) }); function change(before) { while(true) { var next = Math.floor(Math.random()*img_num); if(next != before) { break; } } $("img","#sample").eq(before).fadeOut(fade_time); $("img","#sample").eq(next).fadeIn(fade_time); setTimeout("change(" + next + ")",show_time) } </script> </head> <body> <div id="sample"> <img src="01.jpg"> <img src="02.jpg"> <img src="03.jpg"> <img src="04.jpg"> <img src="05.jpg"> <img src="06.jpg"> <img src="07.jpg"> <img src="08.jpg"> <img src="09.jpg"> <img src="10.jpg"> <img src="11.jpg"> <img src="12.jpg"> <img src="13.jpg"> <img src="14.jpg"> <img src="15.jpg"> </div> <noscript> <img src="01.jpg"> </noscript> </body> </html> こんな感じでどうでしょう？ ページを読み込んだときに画像を表示しないよう#sample img にdisplay:none;を追加しました。 ページの読み込みが重くなるようでしたら、$.ajax等を使って時間差で読み込んでみるといいかもしれません。
お礼
ありがとうございました。