木曜日, 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>
<!--/.viewer-->


補足

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

 

sample


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


  • spainsevilla
  • meguro
  • Czech
  • Namibia
 original handmade accessary  drop.
  • drop.スワロフスキー マーキス ピアス (クリスタルパラダイスシャイン)
  • drop.ファーキャッチピアス
  • drop.スワロフスキー ドロップ ピアス
  • drop.スワロフスキー ドロップ ピアス
  • drop.スワロフスキー ドロップ ピアス
  • drop.スワロフスキー ドロップ ピアス
  • drop.スワロフスキー ドロップ フック ピアス
  • drop.スワロフスキー ドロップ フック ピアス
  • drop.スワロフスキー ドロップ フック ピアス
  • drop.チェコガラス ドロップ チェーン ピアス
  • drop.チェコガラス ドロップ チェーン ピアス
  • drop.フレッシュバナナピアス
  • drop.ピアス アリス 三月うさぎ (うさぎ×シルクハット)
  • drop.スエード ブレスレット
  • drop.スエード ブレスレット