LabPad（ラボパッド）は、WEBを仕事にするオオタニのサンプル記録帳です。

• 一覧に戻る

demo

memo

作業内容

クロスフェードで画像を切り替える時それぞれの画像にリンクを設定したいなと思い、探してみたらA Simple jQuery Slideshowてのがあったので試してみます。リンク設定した画像で挙動させるよう、少しいじっています。

--- jQuery設定 ---
<script type="text/javascript" src="../common/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
　function slideSwitch() {
　　var $active = $('#slideshow a.active');
　　if ( $active.length == 0 ) $active = $('#slideshow a:last');
　　var $next =  $active.next().length ? $active.next()
　　　: $('#slideshow a:first');

　　$active.addClass('last-active');

　　$next.css({opacity: 0.0})
　　　.addClass('active')
　　　.animate({opacity: 1.0}, 1000, function() {
　　　　$active.removeClass('active last-active');
　　　});
　}

　$(function() {
　　setInterval( "slideSwitch()", 4000 );
　});
</script>

--- css設定 ---
#slideshow {
　position:relative;
　height:350px;
}
#slideshow a {
　position:absolute;
　top:0;
　left:0;
　z-index:8;
　opacity:0.0;
}
#slideshow a.active {
　z-index:10;
　opacity:1.0;
}
#slideshow a.last-active {
　z-index:9;
}

--- html設定 ---
<div id="slideshow">
　<a href="http://otani-webs.com/blog/2010/06/satsuma-god/"><img src="img/100815/1.jpg" alt="" /></a>
　<a class="active" href="http://otani-webs.com/blog/2010/08/has/"><img src="img/100815/2.jpg" alt="" /></a>
　<a href="http://otani-webs.com/blog/2010/08/dorei/"><img src="img/100815/3.jpg" alt="" /></a>
</div>

参考記事

• A Simple jQuery Slideshow | Jon Raasch's Blog