スライドショー（jQery)

BACK

---

■　スライドショー（jQery)

---

★　jQuery によるスライドショー

◆　フリープラグインへセット

<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow img.active');
if ( $active.length == 0 ) $active = $('#slideshow img:last');
var $next = $active.next().length ? $active.next() : $('#slideshow img:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 2000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 3000 );
});
</script>

●　　setInterval( "slideSwitch()", 2000 );
　　→　 2000を調整して速さを変える。
　　単位：ミリ秒　1000は、1秒

●　.animate({opacity: 1.0}, 2000, function()
　　→　100 を　大きくすると透過が遅くなります。ゆっくり画像が変わるようになります。
　　上記　setInterval　の数値より小さくして、間隔を空けるといいと思います。

---

◆　ＣＳＳ　を追記

/* ----------------------------------------------------- */
/* ■ スライドショー用　ＣＳＳ 　jQery　　　 　　　　　　*/
/* ----------------------------------------------------- */
#slideshow { position:relative; width:320px; height:240px; }
#slideshow img { position:absolute; top:0; left:0; z-index:8; }
#slideshow img.active { z-index:10; }
#slideshow img.last-active { z-index:9; }

---

◆　記事部分

<div id="slideshow">
<img src="画像のＵＲＬ" class="active">
<img src="画像のＵＲＬ">
<img src="画像のＵＲＬ">
<img src="画像のＵＲＬ">
<img src="画像のＵＲＬ">
<img src="画像のＵＲＬ">
</div>

●　class="active"　で開始画像を指定する

---

◆　例

<div id="slideshow"><img src="http://stat.ameba.jp/user_images/20100125/06/new-bulue9/20/00/g/t01800210_0180021010388046117.gif" /><img class="active" src="http://stat.ameba.jp/user_images/20100125/06/new-bulue9/41/e0/g/t01800210_0180021010388046116.gif" /><img src="http://stat.ameba.jp/user_images/20100125/06/new-bulue9/35/f3/g/t01800210_0180021010388046114.gif" /><img src="http://stat.ameba.jp/user_images/20100125/06/new-bulue9/ab/1b/g/t01800210_0180021010388046113.gif" /><img src="http://stat.ameba.jp/user_images/20100125/06/new-bulue9/cb/82/g/t01800210_0180021010388046111.gif" /><img src="http://stat.ameba.jp/user_images/20100125/06/new-bulue9/09/69/g/t01800210_0180021010388044102.gif" /></div>

<center><div id="slideshow"><img class="active" height="240" width="320" src="http://stat.ameba.jp/user_images/20100125/19/new-bulue9/36/c3/j/o0640048010388662973.jpg" /><img height="240" width="320" src="http://stat.ameba.jp/user_images/20100125/19/new-bulue9/87/cb/j/o0640048010388662972.jpg" /><img height="240" width="320" src="http://stat.ameba.jp/user_images/20100125/19/new-bulue9/c9/46/j/o0640048010388662971.jpg" /><img height="240" width="320" src="http://stat.ameba.jp/user_images/20100125/19/new-bulue9/a7/5b/j/o0640048010388662969.jpg" /><img height="240" width="320" src="http://stat.ameba.jp/user_images/20100125/19/new-bulue9/77/29/j/o0640048010388662968.jpg" /><img height="240" width="320" src="http://stat.ameba.jp/user_images/20100125/19/new-bulue9/2f/8a/j/o0640048010388661301.jpg" /><img height="240" width="320" src="http://stat.ameba.jp/user_images/20100125/19/new-bulue9/ca/fd/j/o0640048010388661300.jpg" /><img height="240" width="320" src="http://stat.ameba.jp/user_images/20100125/19/new-bulue9/23/9f/j/o0640048010388661299.jpg" /><img height="240" width="320" src="http://stat.ameba.jp/user_images/20100125/19/new-bulue9/28/b0/j/o0640048010388661295.jpg" /><img height="240" width="320" src="http://stat.ameba.jp/user_images/20100125/19/new-bulue9/2f/e4/j/o0640048010388661289.jpg" /><img height="240" width="320" src="http://stat.ameba.jp/user_images/20100125/19/new-bulue9/41/d3/j/o0640048010388654823.jpg" /><img height="240" width="320" src="http://stat.ameba.jp/user_images/20100125/19/new-bulue9/00/00/j/o0640048010388654820.jpg" /><img height="240" width="320" src="http://stat.ameba.jp/user_images/20100125/19/new-bulue9/fd/2d/j/o0640048010388654819.jpg" /><img height="240" width="320" src="http://stat.ameba.jp/user_images/20100125/19/new-bulue9/fb/64/j/o0640048010388654818.jpg" /><img height="240" width="320" src="http://stat.ameba.jp/user_images/20100125/19/new-bulue9/96/93/j/o0640048010388654812.jpg" /><img height="240" width="320" src="http://stat.ameba.jp/user_images/20100125/19/new-bulue9/e3/d2/j/o0640048010388653138.jpg" /><img height="240" width="320" src="http://stat.ameba.jp/user_images/20100125/19/new-bulue9/fe/58/j/o0640048010388653136.jpg" /><img height="240" width="320" src="http://stat.ameba.jp/user_images/20100125/19/new-bulue9/6e/3f/j/o0640048010388653135.jpg" /><img height="240" width="320" src="http://stat.ameba.jp/user_images/20100125/19/new-bulue9/a6/5d/j/o0640048010388653132.jpg" /><img height="240" width="320" src="http://stat.ameba.jp/user_images/20100125/19/new-bulue9/a0/cc/j/o0640048010388653128.jpg" /><img height="240" width="320" src="http://stat.ameba.jp/user_images/20100125/19/new-bulue9/32/3b/j/o0640048010388651051.jpg" /><img height="240" width="320" src="http://stat.ameba.jp/user_images/20100125/19/new-bulue9/a1/cb/j/o0640048010388651050.jpg" /><img height="240" width="320" src="http://stat.ameba.jp/user_images/20100125/19/new-bulue9/e6/12/j/o0640048010388651048.jpg" /><img height="240" width="320" src="http://stat.ameba.jp/user_images/20100125/19/new-bulue9/cf/14/j/o0640048010388651046.jpg" /><img height="240" width="320" src="http://stat.ameba.jp/user_images/20100125/19/new-bulue9/e8/78/j/o0640048010388651045.jpg" /></div>
</center>

★　追記

ヘッダーに設置したい場合は、下記をフリープラグインへ追記

<script type="text/javascript">
$(document).ready(function(){$("#slideshow").appendTo("#header");})
</script>

◆　結果 (速さは、私が勝手に調整するため、見るときによって変わります）

★　参考サイト

PHP & JavaScript Room

---

BACK