無料でビットコインをもらえるのは、ビットフライヤー

[み]jQueryで画像がフェードイン・フェードアウトするスライドショーを実装する方法

jquery

jQueryで画像がフェードイン・フェードアウトするスライドショーを実装する方法を紹介します。画像がスライドするようなスライドショーは、いろんなプラグインがあるのでたくさん紹介されていますが、フェードイン・フェードアウトで切り替わるものはGoogle先生に聞いてもなかなか見つけられなかったので、メモとして残します。

フェードイン・フェードアウトで画像が切り替わるスライドショー

まずは、デモをごらんください。
DEMO

今回のデモで使用した画像は、ぱくたそさんのを使いました。
ぱくたそ-フリー写真素材・無料ダウンロード

html

[cc lang=”html”]
[/cc] スライドショーを表示したところにidをつけて、フェードイン・フェードアウトで切り替えたい画像をリストで並べています。ちなみに、ニーズがあるかはわかりませんが、画像はいくつでもOKです。

それと、jQueryの読み込みもお忘れなく。
[cc lang=”html”]


[/cc]

CSS

[cc lang=”css”] #pics {
width: 900px;
height: 600px;
position: relative;
}
[/cc] 画像を表示するボックスをサイズを指定するとともに、position: relative; にしておきます。

JavaScript(jQuery)

[cc lang=”javascript”] $(function(){
var $interval = 2000; // 切り替わりの間隔(ミリ秒)
var $fade_speed = 1000; // フェード処理の早さ(ミリ秒)
$(“#pics ul li”).css({“position”:”relative”,”overflow”:”hidden”});
$(“#pics ul li”).hide().css({“position”:”absolute”,”top”:0,”left”:0});
$(“#pics ul li:first”).addClass(“active”).show();
setInterval(function(){
var $active = $(“#pics ul li.active”);
var $next = $active.next(“li”).length?$active.next(“li”):$(“#pics ul li:first”);
$active.fadeOut($fade_speed).removeClass(“active”);
$next.fadeIn($fade_speed).addClass(“active”);
},$interval);
});
[/cc] htmlのコードをコピペして使う場合は、このままでOKです。必要に応じて、#picsの部分を変更してください。

jQueryを勉強しましょう

htmlとかCSSとかはなんとなくわかってきたんだけど、jQueryって聞くとなかなか手がでない… そんな方はきっとたくさんいますよねw でも、jQueryって、実はカンタンなんです。

でも、jQuery 日本語リファレンスとか見ても、これをどう使ったらいいのかいまいちピンとこない… ええ、たしかにそうですよね。ある程度わかってくると、リファレンス見ても理解できるんですが、最初のとっかかりとしては、なかなか難しいと思います。

なので、そんな方には、本をおススメします。KindleとかKoboとか電子書籍がこれだけ世の中に広まったというのに、紙の本をおススメします!

実際にWebサイトでの使用例が載っているので、jQueryってこんなことできるんだ!という感想を持ちます。それで、もちろんコードも載っているので、自分のサイトにも応用できちゃうわけですね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です