10-08-15
クロスフェードでリンク画像を切り替える「Simple jQuery Slideshow Plugin」
demo
memo
作業内容
クロスフェードで画像を切り替える時それぞれの画像にリンクを設定したいなと思い、探してみたらSimple jQuery Slideshow Pluginてのがあったので試してみます。フェード効果などの設定は以下の通り。
- timeout … ミリ秒（デフォルトは 2000）
- fadetime … ミリ秒（デフォルトは 600）
- type … 'sequence'か'random'（デフォルトは'sequence'）
--- jQuery設定 ---
<script type="text/javascript" src="../common/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/100815/jquery.slideshow.js"></script>
--- html設定 ---
<div id="slideshow">
<a href="http://otani-webs.com/blog/2010/06/satsuma-god/"><img src="img/100815/1.jpg" alt="" /></a>
<a 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>
<script type="text/javascript">
$('#slideshow').slideshow({
timeout: 2000,
fadetime: 2000,
type: 'sequence',
});
</script>