jqueryのスライドショー実現方法を教えて下さい

解決済

質問者：tekkenman7
質問日時：2011/04/01 19:44
回答数：1件

多くのサイトで見られるスライドショーですが、それをjqueryを使い実現したいです。

ぜひ実現したい内容は、

(1)前の画像から次の画像へと変わる様子は、前の画像が徐々に透明化し、
　次の画像が前の写真と重なり合うように浮き出てくるような感じにしたいです。
　IEとFirefox、Chorome、Safariで同じ様に動作させたいです。

(2)使用する画像は900px×400pxのJPGで、15枚(01.jpg ～ 15.jpg)あるので、
　ページの読み込みが重くならないようにしたいです。

(3)サイトに訪れた際に、最初に表示される画像は15枚中1枚をランダムで選択される

(4)2枚目、3枚目もランダムに選択される

(5)代替用の画像も用意したいです。

上記(1)～(5)を満たすには、下記コードの<script>こちらを教えて下さい</script>に
どのようなプログラムを作ればいいのでしょうか？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<style type="text/css">
#sample {
margin: 0px;
padding: 0px;
width: 900px;
height: 400px;
float: left;
position: relative;
}

#sample img {
position: absolute;
left: 0;
top: 0;
}
</style>

<script src="jquery-1.5.1.min.js"></script>
<script>こちらを教えて下さい</script>
</head>
<body>
<div id="sample">
</div>
<noscript>
<img src="01.jpg">
</noscript>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： yui-magic
回答日時：2011/04/04 09:22

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<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等を使って時間差で読み込んでみるといいかもしれません。