分享一款基于脚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左右滑动切换特效的更多相关文章

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

    分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.   效果图如下:   废话不多说,代码奉上!   html代码: <div ...

  2. 基于jQuery左右滑动切换图片代码

    分享一款基于jQuery左右滑动切换图片代码.这是一款基于jQuery实现的左右滑动切换焦点图代码.效果图如下: 在线预览   源码下载 实现的代码: <div class="v_ou ...

  3. 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效

    基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...

  4. 基于HTML5全屏图文左右滑动切换特效

    基于HTML5全屏图文左右滑动切换特效.这是一款基于jQuery+HTML5实现的全屏图文切换特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <main> & ...

  5. 使用jQuery实现点击左右滑动切换特效

    使用jQuery实现点击左右滑动切换特效: HTML代码如下: <!--整体背景div--> <div class="warp"> <!--中间内容d ...

  6. 《基于JQuery和CSS的特效整理》系列分享专栏

    <基于JQuery和CSS的特效整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201724.html 文章 一款基于jQue ...

  7. jquery背景自动切换特效

    查看效果网址:http://keleyi.com/a/bjad/4kwkql05.htm 本特效的jquery版本只支持1.9.0以下. 代码如下: <!DOCTYPE html PUBLIC ...

  8. 一款基于jQuery轮播切换焦点图,可播放多张图片

    今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...

  9. 动漫网站基于jquery的横向手风琴特效

    今天给大家分享一款动漫网站基于jquery的横向手风琴特效.这款手风琴特效适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...

随机推荐

  1. HTML页面中显示HTML标签<xmp>

    最近做东西遇到一个HTML页面中显示HTML标签的需求,比如要显示</span> 解决方法如下 HTML页面中显示HTML标签代码,可以使用<xmp>html标签内容</ ...

  2. Java 内存模型及GC原理 (转载)

    一个优秀Java程序员,必须了解Java内存模型.GC工作原理,以及如何优化GC的性能.与GC进行有限的交互,有一些应用程序对性能要求较高,例如嵌入式系统.实时系统等,只有全面提升内存的管理效率,才能 ...

  3. MySQL -- 外键创建失败

    使用show engine innodb status\G 查看数据库状态的时候,发现以下报错信息: ------------------------ LATEST FOREIGN KEY ERROR ...

  4. 还没被玩坏的robobrowser(8)——robobrowser的实现原理

    背景 学习使用工具实际上不难,不过我们应该通过阅读工具源码来提升自己的水平. 多读代码,读好代码.很不错,robobrowser的代码简单易懂,值得学习. 预备知识 源码地址 一起其实是从browse ...

  5. Eclipse安装PlantUML插件

    新技术的诞生和更新,新工具的发现和使用是两件让人开心的事情. 还记得Visio下苦苦的画流程图的时光吗,现在一切都变得so easy,因为有PlantUML! 官网:http://plantuml.c ...

  6. shell 数组,双层循环打印变量

    双层循环,打印循环执行次数. 特别注意 ,shell 脚本赋值时 '=' 两侧不能有空格,否则报错,shell command not found 但在if 语句中需要有: STR1="ab ...

  7. 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 ...

  8. MSSQL2005:“超时时间已到。在操作完成之前超时时间已过或服务器未响应”

    1.今天在整合项目中有这样一个需求,就是要改变以存在表字段的文本的大小,如把char(15)改成varchar(50). 2.此时以存在表已有1885742条数据,在直接下面进行调用 ALTER TA ...

  9. 如何在 Mac 上通过 Boot Camp 安装 Windows?

    如何在 Mac 上通过 Boot Camp 安装 Windows? The following contents are chosen from the apple website, thanks f ...

  10. Intellij dea 注释行如何自动缩进?

    Intellij dea 注释行如何自动缩进?   进入 Settings -> Code Style -> Java ,在右边选择 “Code Generation” Tab,然后找到 ...