人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

●質問者: kumagoro779
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Cherenkov
●300ポイント ベストアンサー

ついっぷるフォトを参考にして、矢印部分をオーバーレイにする方法でサンプルを作ってみました。
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>


参考:


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

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ