webサイトでページを読み込んだ際に画像が自動的にフェードイン・フェードアウトするjavascript(jquery)のコードの組み方について質問です。


下記ページのように、ページを読み込んだ際に「前へ」「次へ」と表示された三角形のアイコン画像が自動でフェードイン・フェードアウトするのと同じ機能をwebサイトに実装したいと考えていますが、javascript(恐らくjqueryを使う?)をどう組めば良いのかよくわかりません。
http://p.twipple.jp/2Zrwf

つきましては上記を実装するのに必要なコードを具体的に教えていただけないでしょうか?
特にスマートフォン向けサイトで考えていますので、読み込みが重くならない組み方ですととても助かります。
何卒よろしくお願いいたします。

回答の条件
  • 1人10回まで
  • 13歳以上
  • 登録:2012/07/05 19:17:27
  • 終了:2012/07/06 14:21:02

ベストアンサー

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922012/07/05 22:39:43

ポイント300pt

ついっぷるフォトを参考にして、矢印部分をオーバーレイにする方法でサンプルを作ってみました。
http://jsfiddle.net/cherenkov/cBFTJ/4/

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type='text/javascript'>
$(function() {
	$('#img_overlay_container').animate({opacity:0}, 1500, function() {
		$(this).hover(function() {
			$(this).animate({opacity:1}, 300);
		}, function() {
			$(this).animate({opacity:0}, 300);
		});
	});
});
</script>
<style>
#main {
	width:500px;
	border:1px solid black;
	position: relative;
}
#img_box {
	text-align: center;
}
#img_overlay_container {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
}
#btn_prev, #btn_next {
	position: absolute;
	top: 40%;
}
#btn_next {
	right: 0;
}
</style>
</head>
<body>
<div id="main">
	<div id="img_box">
		<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/k/kiyohero/20060821/20060821121132.jpg">
	</div>
	<div id="img_overlay_container">
		<a href="prev.html"><img id="btn_prev" src="http://cdn-ak.f.st-hatena.com/images/fotolife/C/Cherenkov/20120705/20120705215757.png"></a>
		<a href="next.html"><img id="btn_next" src="http://cdn-ak.f.st-hatena.com/images/fotolife/C/Cherenkov/20120705/20120705215756.png"></a>
	</div>
</div>
</body>
</html>


参考:

id:kumagoro779

ご連絡が遅くなりました。早速ありがとうございます!!!とてもわかりやすいサンプルを作って頂いたので大変助かります。
ありがとうございました!!!

2012/07/06 14:19:20

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません