分享一款基于脚jQuery左右滑动切换特效。这是一款鼠标点击左右箭头按钮图片滚动切换，鼠标移到图片上显示透明边框特效。
效果图如下：
废话不多说，代码奉上！
html代码：
1 <div class="bodyCon08"><!--学员--> 2 <div class="students"> 3 4 <div id="four_flash"> 5 <div class="flashBg"> 6 <ul class="mobile"> 7 <li> 8 <img src="images/senke_xy00.jpg" /> 9 <dd>高同学</dd> 10 <p>2013年CPA暑期班学员，一年通过5门课程</p> 11 <a href=""></a> 12 </li> 13 <li> 14 <img src="images/senke_xy01.jpg" /> 15 <dd>李同学</dd> 16 <p>2014年CPA周末旗舰班学员；1年通过4门课程</p> 17 <a href=""></a> 18 </li> 19 <li> 20 <img src="images/senke_xy02.jpg" /> 21 <dd>丁同学</dd> 22 <p>现就职某会计师师事务所<br/>2012年CPA学员，3年通过6门课程</p> 23 <a href=""></a> 24 </li> 25 <li> 26 <img src="images/senke_xy03.jpg" /> 27 <dd>宋同学</dd> 28 <p>2013年会计证、CPA长线周末班学员，2014年通过4门课程；</p> 29 <a href=""></a> 30 </li> 31 <li> 32 <img src="images/senke_xy04.jpg" /> 33 <dd>战同学</dd> 34 <p>2012年北京会计初级金榜，2014年会计中级高分一次通过</p> 35 <a href=""></a> 36 </li> 37 <li> 38 <img src="images/senke_xy05.jpg" /> 39 <dd>于同学</dd> 40 <p>2014年会计中级学员，1次性通过中级全科</p> 41 <a href=""></a> 42 </li> 43 44 </ul> 45 </div> 46 <div class="but_left"><img src="images/qianxleft.png" /></div> 47 <div class="but_right"><img src="images/qianxr.png" /></div> 48 </div> 49 50 </div> 51 </div>
js代码：
1 //学员 2 var _index5=0; 3 $("#four_flash .but_right img").click(function(){ 4 _index5++; 5 var len=$(".flashBg ul.mobile li").length; 6 if(_index5+5>len){ 7 $("#four_flash .flashBg ul.mobile").stop().append($("ul.mobile").html()); 8 } 9 $("#four_flash .flashBg ul.mobile").stop().animate({left:-_index5*326},1000); 10 }); 11 12 13 $("#four_flash .but_left img").click(function(){ 14 if(_index5==0){ 15 $("ul.mobile").prepend($("ul.mobile").html()); 16 $("ul.mobile").css("left","-1380px"); 17 _index5=6 18 } 19 _index5--; 20 $("#four_flash .flashBg ul.mobile").stop().animate({left:-_index5*326},1000); 21 });
完整项目源码下载：
博客园附件满了，需要的话，大家可以到我另一篇帖子下载。
【来自：张董'Blogs：http://www.cnblogs.com/LonelyShadow，转载请注明出处。】
亲们。码字不容易，觉得不错的话记得点赞哦。。
