您所在的位置:小祥子 » 编程 » JavaScript » 正文

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

时间:2015-07-17 编辑:张董 来源:Cnblogs
分享一款基于脚jQuery左右滑动切换特效。这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效。   效果图如下:   废话不多说,代码奉上!   html代码:
 <div class="bodyCon08"><!--学员-->
     <div class="students">
          
           <div id="four_Flash">
             <div class="flashBg">
                 <ul class="mobile">
                     <li>
                         <img src="http://www.cnblogs.com/LonelyShadow/p/images/senke_xy00.jpg" />
                         <dd>高同学</dd>
                         <p>2013年CPA暑期班学员,一年通过5门课程</p>
                         <a href=""></a>
                     </li>
                     <li>
                         <img src="http://www.cnblogs.com/LonelyShadow/p/images/senke_xy01.jpg" />
                         <dd>李同学</dd>
                         <p>2014年CPA周末旗舰班学员;1年通过4门课程</p>
                         <a href=""></a>
                     </li>
                     <li>
                         <img src="http://www.cnblogs.com/LonelyShadow/p/images/senke_xy02.jpg" />
                         <dd>丁同学</dd>
                         <p>现就职某会计师师事务所<br/>2012年CPA学员,3年通过6门课程</p>
                         <a href=""></a>
                     </li>
                     <li>
                         <img src="http://www.cnblogs.com/LonelyShadow/p/images/senke_xy03.jpg" />
                         <dd>宋同学</dd>
                         <p>2013年会计证、CPA长线周末班学员,2014年通过4门课程;</p>
                         <a href=""></a>
                     </li>
                     <li>
                         <img src="http://www.cnblogs.com/LonelyShadow/p/images/senke_xy04.jpg" />
                         <dd>战同学</dd>
                         <p>2012年北京会计初级金榜,2014年会计中级高分一次通过</p>
                         <a href=""></a>
                     </li>
                     <li>
                         <img src="http://www.cnblogs.com/LonelyShadow/p/images/senke_xy05.jpg" />
                         <dd>于同学</dd>
                         <p>2014年会计中级学员,1次性通过中级全科</p>
                         <a href=""></a>
                     </li>
  
                 </ul>
             </div>
             <div class="but_left"><img src="http://www.cnblogs.com/LonelyShadow/p/images/qianxleft.png" /></div>
             <div class="but_right"><img src="http://www.cnblogs.com/LonelyShadow/p/images/qianxr.png" /></div>
           </div>
            
     </div>
 </div>
JS代码:
 //学员
 var _index5=0;
 $("#four_flash .but_right img").click(function(){
     _index5++;
     var len=$(".flashBg ul.mobile li").length;
     if(_index5+5>len){
         $("#four_flash .flashBg ul.mobile").stop().append($("ul.mobile").html());
     }
     $("#four_flash .flashBg ul.mobile").stop().animate({left:-_index5*326},1000);
     });
  
      
 $("#four_flash .but_left img").click(function(){
     if(_index5==0){
         $("ul.mobile").prepend($("ul.mobile").html());
         $("ul.mobile").CSS("left","-1380px");
         _index5=6
     }
     _index5--;
     $("#four_flash .flashBg ul.mobile").stop().animate({left:-_index5*326},1000);
     });
完整项目源码下载: 博客园附件满了,需要的话,大家可以到我另一篇帖子下载。  
关键词:特效 源码