【Javascript】li要素をクロスフェードするシンプルなjQueryプラグインをつくりました | Wood-Roots:blog

2012
09/26

li要素をクロスフェードするシンプルなjQueryプラグインをつくりました

li要素をクロスフェードするだけのシンプルなプラグインをつくりました。
画像とテキストが混じった状態でも順番にフェードイン・フェードアウトを繰り返します。

DEMOはこちら
ダウンロード

もともとプラグインではなくベタに書いてとある案件で使ったのですが、簡単なつくりのわりには思いのほか使い勝手がよさそうなのでプラグインにしました。

画像ではないテキストはWindowsXP以前の環境ではとても見出しやキービジュアルでは使うことなどできなかったのですが、最近の環境ではWindows環境でもそこそこきれいに見えます。そこで画像と文字をアニメーションさせるだけでもまぁまぁいけるんじゃ？と思ったのが作成したきっかけです。

HTMLはきわめてシンプルです。.slide_textというクラスがあるliはテキストです（クラス名はオプションで変更できます）。

1
2
3
4
5
6
7
8
<ul id="slider">
<li class="slide_text">さぁ、飯を食おう</li>
<li><img src="img1.jpg" alt="" /></li>
<li class="slide_text">おにぎりは好きか？</li>
<li><img src="img2.jpg" alt="" /></li>
<li class="slide_text">締めは・・・これだろう？</li>
<li><img src="img3.jpg" alt="" /></li>
</ul>

javascript部分もcrossfade.jsを読み込み、ulに対してcrossfadeというメソッドを実行するだけです。オプションとしてテキストが入るliのクラス名、width,heightを指定します。

1
2
3
4
5
6
7
8
9
10
11
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<script src="crossfade.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#slider').crossfade({
txt : 'slide_text', //テキストのときのクラス名
w : '600px', //幅
h : '200px' //高さ
});
});
</script>

これでli要素の上から順番にクロスフェードを繰り返します。

プラグイン本体の中身は以下になります。setInterval内でクロスフェードの動きを指定しているので、数値を変えたりイージングを使ったりするともっと面白いかもしれません。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
/* ================================================================
crossfade.js
Create: 2012/09/26
for: jQuery 1.7
================================================================ */
(function($){
$.fn.crossfade = function(config){
var defaults = {
txt : 'slide_text',
w : '600px',
h : '200px'
}
$.extend(defaults,config);
return this.each(function(){
 
$(this).css({
position: 'relative',
overflow: 'hidden',
width: defaults.w,
height: defaults.h
}).children('li').css({
position: 'absolute',
left: '0',
top: '0',
overflow: 'hidden',
width: defaults.w,
height: defaults.h
});
$(this).hide();
 
//画像をキャッシュ
var imgarr = $(this).find('img');
$.each(imgarr,function(key,value){
tempimg = new Image();
tempimg.src = $(this).attr('src');
});
 
//img要素を背景化
$(this).children('li').each(function(key,value){
if(!$(this).hasClass(defaults.txt)){
var img = $(this).find('img').attr('src');
var href = $(this).find('a').attr('href');
if(href){
$(this).attr('data-link',href).css('cursor','pointer');
}
$(this).css({
background: 'url(' + img + ') no-repeat center top'
}).empty();
$(this).on('click',function(){
if($(this).attr('data-link')){
location.href = $(this).attr('data-link');
}
});
}
});
 
$(this).fadeIn(2000);
$(this).children('li').not(':first').hide();
 
obj = $(this);
i = 0;
setInterval(function(){
if(i+1 >= $(obj).children('li').size()){
$(obj).children('li:last').fadeOut(2000);
$(obj).children('li:first').delay(500).fadeIn(2000);
i = -1;
} else {
$(obj).children('li').eq(i).fadeOut(3000);
$(obj).children('li').eq(i+1).delay(500).fadeIn(2000);
}
i = i + 1;
},5000);
 
});//funcend
 
};
 
})(jQuery);

ADs

Related Articles関連記事

Post Comments

メールアドレスが公開されることはありません。

Comments

はじめまして。jQuery超初心者ですが、こちらで紹介されている内容が、
やりたいことにとても近いため利用させていただきたいと思っています。
そこでお尋ねしたいことが2点あります。

・画像を画面の上下左右中央に配置するにはどうしたらよいでしょうか？
・フェードインアウトをループさせず、1回で止める（最後の画像もしくはテキストが表示されたまま）

どうぞご回答よろしくお願いいたします。

  • kor
  • 2014年6月14日 10:36 PM

kor　様

コメントありがとうございます。

> ・画像を画面の上下左右中央に配置するにはどうしたらよいでしょうか？

このプラグインでやっていることはul#slider内部のliをクロフフェードしているだけですので、ul#sliderをdivで囲い、そのdivに対して上下左右中央のCSSを書けばどうでしょうか。
CSSの書き方はググるといろいろな事例が出てきます。たとえば以下の様な手法など。

http://css-happylife.com/archives/2007/0804_0000.php

> ・フェードインアウトをループさせず、1回で止める（最後の画像もしくはテキストが表示されたまま）

setInterval内のfunctionを見ていただきたいのですが、

i+1 >= $(obj).children(‘li’).size()

というif内の判定文は最後かどうかを判定しています。このif内でclearIntervalを使ってsetIntervalの繰り返し処理を消せばいけるのではないでしょうか。

お返事ありがとうございます。
レイアウトに関しては色々な事例を参考にしてみたいと思います。

それからループさせない方法ですが、具体的にclearIntervalをどのように設定すればいいのかお教え頂けませんでしょうか。

どうぞ宜しくお願い致します。

  • kor
  • 2014年6月18日 10:05 AM

kor　様

setInterval部分を以下のようにすれば最後の一枚がフェードインして停止します。
setIntervalやclearIntervalは応用するといろいろできる処理ですので、ご興味があれば調べてみるといいかもしれません。

//クリアするためにタイマーIDが必要
timerID = setInterval(function(){
if(i+1 >= $(obj).children(‘li’).size()){

//ここでclearInterval
clearInterval(timerID);

//以下の処理は1.最後の画像フェードアウト→2.最初の画像フェードインなので、繰り返したくないときはいらない
/*
$(obj).children(‘li:last’).fadeOut(2000);
$(obj).children(‘li:first’).delay(500).fadeIn(2000);
i = -1;
*/
} else {

$(obj).children(‘li’).eq(i).fadeOut(3000);
$(obj).children(‘li’).eq(i+1).delay(500).fadeIn(2000);
}
i = i + 1;
},5000);

ありがとうございました。
うまくいきました！！

もうひとつお尋ねしたいのですが、画像を画面中央に配置はできたのですが、
横幅を常に画面100％の設定にするにはどうしたらいいのでしょうか？

crossfadeを使わない状態での設定はできるのですが、組み込むと画像サイズそのままの表示にしかなりません（画面が小さい場合は画像が見切れる）
crossfadeを使う以上横幅100％の設定はできないのでしょうか？

本当に素人質問でもうしわけありません。

  • kor
  • 2014年6月19日 2:51 PM

kor　様

このスクリプトでは画像を中央揃えにするためにliのbackgroundとして画像を配置しています。
なのでもしbackground-sizeが使える環境のみでよければ（つまりIE9以降）、liに対してbackground-size:cover;を設定することで常に幅100%で配置することが可能です。

CSSに

#slide li {
background-size: cover;
}

と追記すればIE9以降であれば幅100%となります。

IE8以前の対応が必要な場合は・・・このスクリプトではちょっと無理ですね(；´∀｀)

Category

Archive

Search

Social