特效介绍
jQuery左右滚动的幻灯片,可无限扩展图片数量。带图片描述,或者说是图片标题,有利于SEO。不兼容IE6
使用方法
1、在head区域加入下面的代码:<link rel="stylesheet" href="css/5imoban.net.css" type="text/css" media="screen" /> <script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script> <script src="js/jquery.flexslider-min.js"></script> <script type="text/javascript"> $(window).load(function() { $('.flexslider').flexslider(); }); </script>2、在您的banner区域加入下面的代码:
<div id="container" style="height:550px;"> <div class="flexslider"> <ul class="slides"> <li> <a href="http://www.5imoban.net" alt="模板网" target="_blank"><img src="images/inacup_samoa.jpg" /></a> <p class="flex-caption">模板网www.5imoban.net</p> </li> <li> <a href="http://www.5imoban.net" alt="模板网" target="_blank"><img src="images/inacup_pumpkin.jpg" /></a> <p class="flex-caption">循环播放的jQuery幻灯片</p> </li> <li> <a href="http://www.5imoban.net" alt="模板网" target="_blank"><img src="images/inacup_donut.jpg" /></a> <p class="flex-caption">模板网www.5imoban.net</p> </li> <li> <a href="http://www.5imoban.net" alt="模板网" target="_blank"><img src="images/inacup_vanilla.jpg" /></a> <p class="flex-caption">jQuery特效www.5imoban.net</p> </li> </ul> </div> </div>如果想增加滚动图片的数目的话,增加li的数量即可。<p>标签内部代码为图片对应标题。