基于jQuery左右滑动切换特效 附源码
2024-08-24 07:58:28
分享一款基于脚jQuery左右滑动切换特效。这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效。
效果图如下:
废话不多说,代码奉上!
html代码:
<div class="bodyCon08"><!--学员--> <div class="students"> <div id="four_flash"> <div class="flashBg"> <ul class="mobile"> <li> <img src="data:images/senke_xy00.jpg" /> <dd>高同学</dd> <p>2013年CPA暑期班学员,一年通过5门课程</p> <a href=""></a> </li> <li> <img src="data:images/senke_xy01.jpg" /> <dd>李同学</dd> <p>2014年CPA周末旗舰班学员;1年通过4门课程</p> <a href=""></a> </li> <li> <img src="data:images/senke_xy02.jpg" /> <dd>丁同学</dd> <p>现就职某会计师师事务所<br/>2012年CPA学员,3年通过6门课程</p> <a href=""></a> </li> <li> <img src="data:images/senke_xy03.jpg" /> <dd>宋同学</dd> <p>2013年会计证、CPA长线周末班学员,2014年通过4门课程;</p> <a href=""></a> </li> <li> <img src="data:images/senke_xy04.jpg" /> <dd>战同学</dd> <p>2012年北京会计初级金榜,2014年会计中级高分一次通过</p> <a href=""></a> </li> <li> <img src="data:images/senke_xy05.jpg" /> <dd>于同学</dd> <p>2014年会计中级学员,1次性通过中级全科</p> <a href=""></a> </li> </ul> </div> <div class="but_left"><img src="data:images/qianxleft.png" /></div> <div class="but_right"><img src="data: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); });
完整项目源码下载:
博客园附件满了,需要的话,大家可以到我另一篇帖子下载。
最新文章
- Learn ZYNC (2)
- git diff获取差异文件中文乱码的解决办法
- bitbucket新建分支
- 3.Python编程语言基础技术框架
- 记录一些容易忘记的属性 -- UIImageView
- LightOJ 1236 Pairs Forming LCM (LCM 唯一分解定理 + 素数筛选)
- jQuery的deferred对象详解(一)
- MFC获取当前时间
- Sql Server专题一:索引(上)
- 顶层const和底层const
- 《Android进阶》之第三篇 深入理解android的消息处理机制
- 简述 Hibernate 和 JDBC 的区别、优缺点
- RBF:RBF基于近红外光谱的汽油辛烷值含量预测结果对比—Jason niu
- qt4 看不到qstring内容
- arcgis api for javascript中使用proxy.jsp
- 各种uml图
- 低版本系统兼容的ActionBar(七)自定义Actionbar标题栏字体
- grails3.1.5 com.mysql.jdbc.Driver
- CSS小技巧(一)
- ParagraphFormat 对象【精品】
热门文章
- git-简单流程(学习笔记)
- 3.Windows Server 2012 R2数据库部署
- javascript:逆波兰式表示法计算表达式结果
- 利用apply()或者rest参数来实现用数组传递函数参数
- C++内联函数
- C#各种同步方法 lock, Monitor,Mutex, Semaphore, Interlocked, ReaderWriterLock,AutoResetEvent, ManualResetEvent
- java面向对象六原则一法则
- TemplateMethod(模块方法模式)
- angular2之前端篇—1(node服务器分支)
- ILJMALL project过程中遇到Fragment嵌套问题:IllegalArgumentException: Binary XML file line #23: Duplicate id