10-08-15
クロスフェードでリンク画像を切り替える「InnerFade with JQuery」
demo
memo
作業内容
クロスフェードで画像を切り替える時それぞれの画像にリンクを設定したいなと思い、探してみたらInnerFade with JQueryてのがあったので試してみます。フェード効果などの設定は以下の通り。
- animationtype … 'fade'か'slide'（デフォルトは'fade'）
- speed … 'slow'か'nomal'か'fast'かミリ秒（デフォルトは'nomal'）
- timeout … ミリ秒（デフォルトは 2000）
- type … 'sequence'か'random'か'random_start'（デフォルトは'sequence'）
- containerheight … （デフォルトは'auto'）
--- jQuery設定 ---
<script type="text/javascript" src="../common/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/100815/jquery.innerfade.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
$('#portfolio').innerfade({ speed: 'slow', timeout: 4000, type: 'sequence', containerheight: '350px' });
}
);
</script>
--- html設定 ---
<ul id="portfolio">
<li><a href="http://otani-webs.com/blog/2010/06/satsuma-god/"><img src="img/100815/1.jpg" alt="" /></a></li>
<li><a href="http://otani-webs.com/blog/2010/08/has/"><img src="img/100815/2.jpg" alt="" /></a></li>
<li><a href="http://otani-webs.com/blog/2010/08/dorei/"><img src="img/100815/3.jpg" alt="" /></a></li>
</ul>