external storage div: クロスフェードするシンプルなスライドショー（自動再生）jQuery

木曜日, 8月 15, 2013

クロスフェードするシンプルなスライドショー（自動再生）jQuery

画像がクロスフェードするだけの

シンプルな画像ビューアーを実装するスクリプト

まずは、jqueryを</head>の前に設置。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

↑これをコピペ

</head>

CSSは以下を（サイズは適当に変更）

CSS
.viewer_01 {
 margin: 0 auto;
 width: 630px;
 height: 430px;
 text-align: left;
 overflow: hidden;
}

.viewer_01 ul {
 width: 630px;
 height: 430px;
 text-align: left;
 overflow: hidden;
 position: relative;
}

.viewer_01 ul li {
 top: 0;
 left: 0;
 width: 630px;
 height: 430px;
 display: none;
 position: absolute;
}

ここにもおいてる（いつか消すかも）

<link href="https://dl.dropboxusercontent.com/u/1277583/jQueryCrossFadeContentsViewer/viewer_01.css"></link>

スクリプト

<script>
$(function(){
    var $setElm = $('.viewer_01'),
    fadeSpeed = 1000,
    switchDelay = 7000;
    $setElm.each(function(){
       var targetObj = $(this);
       var findUl = targetObj.find('ul');
       var findLi = targetObj.find('li');
       var findLiFirst = targetObj.find('li:first');
       findLi.css({display:'block',opacity:'0',zIndex:'99'});
       findLiFirst.css({zIndex:'100'}).stop().animate({opacity:'1'},fadeSpeed);
       setInterval(function(){
       findUl.find('li:first-child').animate({opacity:'0'},fadeSpeed).next('li').css({zIndex:'100'}).animate({opacity:'1'},fadeSpeed).end().appendTo(findUl).css({zIndex:'99'});
        },switchDelay);
    });
});
</script>

説明

$setElm = $(‘.viewer_01’)：対象にするブロック要素名（IDでもクラスでも可）
fadeSpeed = 1500：フェードスピード（調整してみてね。）
switchDelay = 5000：切り替わるまでの待機時間（調整してみてね。）

html（sample）

<div class="viewer_01">
<ul>
<li><a href="http://alao.cocolog-nifty.com/the_eye_forget/2013/07/43c-d65e.html"><img alt="spainsevilla" height="402" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsnRU6J5Q84VoyQPGfVpf9To_WjQp_tuPo7YqlHF6nz53bvYMLIl1MD342irIGRcVTVduFdUZwLe-XT34hAjewt69rvUfYrg6Tb2eibgTixq6hQgX26c6QHA8YLKqy0Zw3xVom/s600/8l4a9050spainsevilla.jpg" width="600" /></a></li>

<li><a href="http://alao.cocolog-nifty.com/the_eye_forget/2013/08/post-9b02.html"><img alt="meguro" height="402" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg32VzQVyG7jjW2DEP1CtIm_fJCtQOtytHpa2UIMunDFU7j9qLVCkiVH5_CxlRhV_8Mrp_NRUp0B0ePbzCm9c-OXP09wfcKR3OoN8N5ou4FZpSNpwzfo3Ry6ePZJ2bNuv1ExdwA/s600/alao_meguro_cr1000.jpg" width="600" /></a></li>

<li><a href="http://alao.cocolog-nifty.com/the_eye_forget/2013/06/200mmf28-6637.html"><img alt="Czech" height="402" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaob42IY9R37pel1XfXabFoFWGPUrWsCaoRvXJhMk4YTc1zMUgg1LnWn1IrnwR7PkhLTchnZCvwxrd8iqGxG5uxGFtKIrA6Iv7yfwvznJOo6aQy15dCMHKxRLTaOp8TvithjLl/s600/img_6974_alao_cr_2.png" width="600" /></a></li>

<li><a href="http://alao.cocolog-nifty.com/the_eye_forget/2013/06/f28-8153.html"><img alt="Namibia" height="402" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzgUbsPjVx5hiqRoC2aF4Zm6n8PiEM9qcUaHFJt6NCTQrFES_ssVwT41t8Q_kFcnAaQWHR0Evp6lQJyp3It3CvWTVKVTWf1PdqOUfgWyjSo3_Q-zw7Q0F_EDkG5uWGGTucKhoN/s600/img_1453cr_alao_1000.jpg" width="600" /></a></li>

</ul>
</div>

補足

＜li＞タグは「position:absolute;」になっている必要がありますが
その中に入る要素についてはそれぞれ任意の指定で問題ありません。

sample

シンプルな形で4枚の画像を
自動再生＆無限ループし続けます。

original handmade accessary drop.