你的位置:首页 > Java教程

[Java教程]基于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   });

 


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