happylife

jQueryで要素を順番にフェードさせ表示する

自作すると短いコードで作れると思ったら長くなった。。。

【html】
<div class=”container fade_group”>
<ul>
<li>〇〇〇〇〇</li>
<li>◆◆◆◆◆</li>
<li>△△△△△</li>
</ul>
<img src=”&lt;?php echo get_template_directory_uri(); ?&gt;/images/topimage.jpg” alt=”topimage” />
</div>
<!– mainvisual –>

【css】
.container {
width: 500px;
height: 500px;
}
.fade_group ul {
position: relative;
}
.fade_group li {
position: absolute;
top: 0;
left: 0;
}
.fade_group img {
width: 960px;
height: 400px;
}

【js】
$(function() {
‘use strict’;
// 順番にフェードイン
var fadeInList = $(‘.mainvisual li’); // フェードインさせる全ての画像の取得
var fadeSet;
fadeInList.hide(); //全ての画像を非表示
// フェードイン起動関数の定義
function fadeStart() {
// フェード処理
function fade() {
fadeInList.fadeOut(2000); // フェードアウトにかかる時間
fadeInList.eq(i).fadeIn(2000); // フェードインにかかる時間
i++;
}
// 切り替わり順番にかかる時間
var i = 0;
fadeSet = setInterval(function() { // 2000ミリ秒間隔で切り替わり
if(i == fadeInList.length) { // 最後の画像を表示した時
i = 0; // 最初の画像に戻す
fade();
} else {
fade();
}
},2000);
}
fadeStart(); // フェードイン起動関数
// フェードイン停止関数の定義
function fadeStop() {
setTimeout(function() { // 15000ミリ秒後に停止処理
clearInterval(fadeSet); // フェードイン停止処理
},15000);
}
fadeStop(); // フェードイン停止関数
});

ここの方が断然良くて、コードも短い
https://on-ze.com/archives/1388

2018年10月25日[木曜日]20時34分09秒 | カテゴリ：コーダーのお仕事 -  コメント(0)