这段利用jquery图片切换特效代码现在各种企业网站当中比较常见，在现在常见的企业网站管理系统当中很多系统都采用了这种技术。利用jquery图片切换特效代码兼容性好，文件少，全面兼容各种主流浏览器，并且可以自由通过设置css样式来定义图片的大小，文字标题等，使用起来非常方便。这种图片切换特效比以前的幻灯片效果简洁，控制效果要强许多。
利用jquery图片切换特效代码的示例图片如下：
利用jquery图片切换特效代码的示例代码如下：
<script src='js/jquery25yi.js' language='javascript' type='text/javascript'></script>
<div id="three_frame">
<div class="f_h">
<div class="boxproduct">
<div class="boxproduct_t">
<a class="next" id="next4" href="javascript:void(0);"></a><a class="prev" id="prev4" href="javascript:void(0);"></a>
<p id="trigger4"></p>
<font>产品展示</font>
<div class="boxproduct_m">
<div class="border"><div class="imglist" id="panel4">
<ol class='list-none yilist'>
<li><a href='#' title='示例案例六' target="_blank" class='img'><img src='http://www.25yi.com/BreviaryImg/120129030416223025yi.jpg' alt='示例案例六' title='示例案例六' width='200' height='150' /></a>
<p><a href="#" title="示例案例">示例案例</a></p>
</li>
<li class='list'><a href='#' title='示例案例五' target="_blank" class='img'><img src='http://www.25yi.com/BreviaryImg/120127090626953025yi.jpg' alt='示例案例五' title='示例案例五' width='200' height='150' /></a>
<p><a href="#" title="示例案例">示例案例</a></p>
</li>
<li class='list'><a href='#' title='示例案例四' target="_blank" class='img'><img src='http://www.25yi.com/BreviaryImg/120127090411734025yi.jpg' alt='示例案例四' title='示例案例四' width='200' height='150' /></a>
<p><a href="#" title="示例案例">示例案例</a></p>
</li>
<li class='list'><a href='#' title='示例案例一' target="_blank" class='img'><img src='http://www.25yi.com/BreviaryImg/120127085952906025yi.jpg' alt='示例案例一' title='示例案例一' width='200' height='150' /></a>
<p><a href="#" title="示例案例">示例案例</a></p>
</li>
<li class='list'><a href='#' title='示例案例三' target="_blank" class='img'><img src='http://www.25yi.com/BreviaryImg/12012708524515025yi.jpg' alt='示例案例三' title='示例案例三' width='200' height='150' /></a>
<p><a href="#" title="示例案例">示例案例</a></p>
</li>
<li class='list'><a href='#' title='示例案例二' target="_blank" class='img'><img src='http://www.25yi.com/BreviaryImg/120127085038375025yi.jpg' alt='示例案例二' title='示例案例二' width='200' height='150' /></a>
<p><a href="#" title="示例案例">示例案例</a></p>
</li>
</ol></div>
</div>
<script src="js/switchable.js" language="javascript" type="text/javascript"></script>
<script type="text/javascript">
var list=$('#panel4');
list.height(list.find('li').height()+20);
$("#trigger4").switchable("#panel4 > ol > li", {
triggerType: "click",
effect: "scroll",
steps: 1,
visible: 5
}).autoplay().carousel().mousewheel();
var api4 = $("#trigger4").switchable();
$("#next4").click(function(){
api4.next();
});
$("#prev4").click(function(){
api4.prev();
});
</script>
</div>
</div>
</div>
</div></div>
jquery图片切换特效代码中用到的js文件下载地址：
http://www.25yi.com/javascript/switchable.js
http://www.25yi.com/javascript/jquery25yi.js
jquery图片切换特效代码中用到的css文件代码如下：
.list-none{ list-style:none;}
.border{border-top:none; }
.imglist .yilist{ padding:5px 0px 5px 0px;}
.imglist .yilist li{ float:left; margin:0px 10px 5px 0px;}
.imglist .yilist li a.img{ display:block; font-size:0px;}
.imglist .yilist li a.img img{ border:1px solid #ddd; padding:3px;}
.imglist .yilist li p{ font-weight:normal; text-align:center; line-height:25px; margin-top:5px; font-size:12px;}
.imglist .yilist li p a{ color:#666666;}
.imglist .yilist li p a:hover{ text-decoration:underline;color: red}
#three_frame .f_h .next,#three_frame .f_h .prev{ float:right; margin-top:8px; width:8px; height:14px; overflow:hidden; margin-right:15px; background:url(../../images/target.gif) no-repeat left -10px; }
jquery图片切换特效代码中用到的图片文件下载地址：
http://www.25yi.com/img/target.gif
把上述代码直接复制到网页文件中就可以使用了。
除非注明，文章均为25亿网站管理系统原创，转载请以链接形式注明出处，谢谢。
本文地址：http://www.25yi.com/wangyesheji/jquerytupianqiehuan-258/