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

简介: 分享一款基于脚jQuery左右滑动切换特效。这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效。   效果图如下:   废话不多说,代码奉上!   html代码: 1 2 3 4 ...
分享一款基于脚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,转载请注明出处。】

亲们。码字不容易,觉得不错的话记得点赞哦。。

目录
相关文章
|
6月前
jQuery+CSS3自动轮播焦点图特效源码
jQuery+CSS3自动轮播焦点图特效源码
61 1
jQuery+CSS3自动轮播焦点图特效源码
|
6月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
135 0
|
11天前
|
JavaScript
jQuery制作的3D冰块立方时钟动态特效源码
jQuery制作的3D冰块立方时钟动态特效源码是一段基于jQuery实现的3D魔方立方时钟效果代码,该设计非常特别,且支持数字颜色的变化,提供8款颜色选择,非常有意思,欢迎对此段代码感兴趣的朋友前来下载使用。
29 8
|
11天前
|
JavaScript
jQuery制作的网站首页宽屏导航轮播图特效源码
jQuery制作的网站首页宽屏导航轮播图特效源码是一段基于jQuery制作的可用于商城首页 微商城 互联网公司或某些电子商城的首页特效,自带有二级菜单栏、轮播图滚动、登录注册按钮等等,非常全面,欢迎对此段代码感兴趣的朋友前来下载使用。
13 4
|
11天前
|
JavaScript
jQuery实现的手风琴四季场景变换特效源码
jQuery实现的手风琴四季场景变换特效源码是一段基于jQuery实现的手风琴四季场景变换效果代码,拥有春夏秋冬四季转场特效,鼠标可放大每个季节的图像,欢迎对此段代码感兴趣的朋友前来下载使用。
18 1
|
2月前
|
JavaScript
jQuery 效果 - 滑动
jQuery 效果 - 滑动
20 5
|
1月前
|
移动开发 JSON 数据可视化
精选八款包括可视化CMS,jquery可视化表单,vue可视化拖拉,react可视化源码
精选八款包括可视化CMS,jquery可视化表单,vue可视化拖拉,react可视化源码
43 0
|
4月前
|
JavaScript
jQuery 效果 - 滑动
jQuery 效果 - 滑动
33 5
|
5月前
切方块游戏 HTML5+jQuery【附源码】
切方块游戏 HTML5+jQuery【附源码】
38 0
|
5月前
制作温馨浪漫爱心表白动画特效HTML5+jQuery【附源码】
制作温馨浪漫爱心表白动画特效HTML5+jQuery【附源码】
116 0