基于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.傲游.搜狗.世界之窗.效果图如下: 在线预 ...
随机推荐
- 【ASP.NET】第一个ASP.NET MVC应用程序
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 开发流程 新建Controller 创建Action 根据Action创建View 在Action获取数据并生产ActionResult传递 ...
- 【HTML】WWW简介
www 什么是WWW www(world wide web),又称为万维网,或通常称为web,是一个基于超文本方式的信息检索服务工具. WWW的工作模式 C/S结构(client/server结构), ...
- The request was denied by service delegate (SBMainWorkspace) for reason: Security ("Entitlement "com.apple.frontboard.debugapplications" required to launch applications for debugging").
最近工程遇到了这个, The request was denied by service delegate (SBMainWorkspace) for reason: Security (" ...
- php执行多个存储过程
2014年3月18日更新: 从以前的使用原生代码来看,只需要将结果集关闭即可,即 $this -> queryID -> close(); . // 使用mysqli方式,修改DbMysq ...
- [转]Http Message结构学习总结
最近做的东西需要更深入地了解Http协议,故死磕了一下RFC2616-HTTP/1.1协议,主要是了解Http Message结构及每部分含义,在此总结一下,写一个模拟发送HTTP请求的工具,由于时间 ...
- Java8 List字符串 去重
http://blog.csdn.net/jiaobuchong/article/details/54412094 public List<String> removeStringList ...
- java appium webview切换处理
Set<String> contexts = driver.getContextHandles(); for(String item :contexts){ // NATIVE_APP / ...
- 让MySQL在美国标准下运行
[美国标准下运行的MySQL会有哪方面的调整] 我不得不说,这里有点标题党了:事实上我想说的就是--ansi模式下启动mysqld进行,但是这个ansi我没有找到更好的译文,就给译成了“美国标准”了. ...
- django -- 用包来组织数据库模型
默认情况下一个django app的所有模型都保存在一个叫models.py的文件中.这样事实是不方便管理的: 通过包来组织模型是比较方便的. 一.第一步:删除models.py: rm -rf mo ...
- unity, shader, Tags的位置
Tags写在Pass里,是不对的,比如: 结果一看shader的Inspector面板,Render queue的值居然不是3001,而是2000: 改为: 再看shader的inspector面板, ...