基于jQuery左右滑动切换特效
分享一款基于脚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);
});
via:http://www.w2bc.com/article/49525
基于jQuery左右滑动切换特效的更多相关文章
- 基于jQuery左右滑动切换特效 附源码
分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效. 效果图如下: 废话不多说,代码奉上! html代码: <div ...
- 基于jQuery左右滑动切换图片代码
分享一款基于jQuery左右滑动切换图片代码.这是一款基于jQuery实现的左右滑动切换焦点图代码.效果图如下: 在线预览 源码下载 实现的代码: <div class="v_ou ...
- 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效
基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...
- 基于HTML5全屏图文左右滑动切换特效
基于HTML5全屏图文左右滑动切换特效.这是一款基于jQuery+HTML5实现的全屏图文切换特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <main> & ...
- 使用jQuery实现点击左右滑动切换特效
使用jQuery实现点击左右滑动切换特效: HTML代码如下: <!--整体背景div--> <div class="warp"> <!--中间内容d ...
- 《基于JQuery和CSS的特效整理》系列分享专栏
<基于JQuery和CSS的特效整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201724.html 文章 一款基于jQue ...
- jquery背景自动切换特效
查看效果网址:http://keleyi.com/a/bjad/4kwkql05.htm 本特效的jquery版本只支持1.9.0以下. 代码如下: <!DOCTYPE html PUBLIC ...
- 一款基于jQuery轮播切换焦点图,可播放多张图片
今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...
- 动漫网站基于jquery的横向手风琴特效
今天给大家分享一款动漫网站基于jquery的横向手风琴特效.这款手风琴特效适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...
随机推荐
- HTML页面中显示HTML标签<xmp>
最近做东西遇到一个HTML页面中显示HTML标签的需求,比如要显示</span> 解决方法如下 HTML页面中显示HTML标签代码,可以使用<xmp>html标签内容</ ...
- Java 内存模型及GC原理 (转载)
一个优秀Java程序员,必须了解Java内存模型.GC工作原理,以及如何优化GC的性能.与GC进行有限的交互,有一些应用程序对性能要求较高,例如嵌入式系统.实时系统等,只有全面提升内存的管理效率,才能 ...
- MySQL -- 外键创建失败
使用show engine innodb status\G 查看数据库状态的时候,发现以下报错信息: ------------------------ LATEST FOREIGN KEY ERROR ...
- 还没被玩坏的robobrowser(8)——robobrowser的实现原理
背景 学习使用工具实际上不难,不过我们应该通过阅读工具源码来提升自己的水平. 多读代码,读好代码.很不错,robobrowser的代码简单易懂,值得学习. 预备知识 源码地址 一起其实是从browse ...
- Eclipse安装PlantUML插件
新技术的诞生和更新,新工具的发现和使用是两件让人开心的事情. 还记得Visio下苦苦的画流程图的时光吗,现在一切都变得so easy,因为有PlantUML! 官网:http://plantuml.c ...
- shell 数组,双层循环打印变量
双层循环,打印循环执行次数. 特别注意 ,shell 脚本赋值时 '=' 两侧不能有空格,否则报错,shell command not found 但在if 语句中需要有: STR1="ab ...
- Java – How to convert a primitive Array to List
Java – How to convert a primitive Array to ListCode snippets to convert a primitive array int[] to a ...
- MSSQL2005:“超时时间已到。在操作完成之前超时时间已过或服务器未响应”
1.今天在整合项目中有这样一个需求,就是要改变以存在表字段的文本的大小,如把char(15)改成varchar(50). 2.此时以存在表已有1885742条数据,在直接下面进行调用 ALTER TA ...
- 如何在 Mac 上通过 Boot Camp 安装 Windows?
如何在 Mac 上通过 Boot Camp 安装 Windows? The following contents are chosen from the apple website, thanks f ...
- Intellij dea 注释行如何自动缩进?
Intellij dea 注释行如何自动缩进? 进入 Settings -> Code Style -> Java ,在右边选择 “Code Generation” Tab,然后找到 ...