基于jQuery左右滑动切换特效 附源码
分享一款基于脚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=618 }19 _index5--;20 $("#four_flash .flashBg ul.mobile").stop().animate({left:-_index5*326},1000);21 });完整项目源码下载：博客园附件满了，需要的话，大家可以到我另一篇帖子下载。