クロスフェードで画像を切り替える時それぞれの画像にリンクを設定したいなと思い、探してみたらInnerFade with JQueryてのがあったので試してみます。フェード効果などの設定は以下の通り。
--- 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>