基于jQuery左右滑动切换特效 附源码

分享一款基于脚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=6

18     }

19     _index5--;

20     $("#four_flash .flashBg ul.mobile").stop().animate({left:-_index5*326},1000);

21     });

 

完整项目源码下载:
博客园附件满了,需要的话,大家可以到我另一篇帖子下载。
 

你可能感兴趣的:(jquery)