锋利的jQuery幻灯片实例
//锋利的jQuery幻灯片实例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}body {font-size: 12px;}.v_show {width: 592px;margin: 20px 0px 0 30px;border: 1px solid #ccc;}.v_caption {width: 592px;height: 40px;line-height: 40px;overflow: hidden;background: url("images/btn_cartoon.gif") repeat-x;}.cartoon {float: left;width: 85px;margin-right: 10px;background: url("images/btn_cartoon.gif") 0px -100px no-repeat;text-indent: -9999px;}.highlight_tip {float: left;padding-top: 16px;margin-right: 10px}.highlight_tip span.current {background: url("images/btn_cartoon.gif") 0px -220px;}.highlight_tip span {display: inline;float: left;width: 7px;height: 7px;overflow: hidden;margin: 0 2px;background: url(images/btn_cartoon.gif) no-repeat 0 -320px;text-indent: -9999px;}.change_btn {float: left;overflow: hidden;width: 65px;padding-top: 8px;}.change_btn span.prev {display: block;float: left;width: 30px;height: 23px;background: url("images/btn_cartoon.gif") 0px -400px no-repeat;text-indent: -9999px;}.change_btn span.next {display: block;float: left;width: 30px;height: 23px;background: url("images/btn_cartoon.gif") -30px -400px no-repeat;text-indent: -9999px;}.v_caption em {float: right;padding-right: 10px;}.v_caption em a {font-size: 12px;text-decoration: none;color: #2B93D2;}.v_content {position: relative;height: 160px;overflow: hidden;}.v_content_list {height: 160px;width: 2500px;position: absolute;left: 0;top: 0;}.v_content_list ul {list-style: none;}.v_content_list li {float: left;margin: 10px 5px 0;padding: 5px;}.v_content_list li a {display: block;width: 128px;height: 80px;overflow: hidden;}.v_content_list h4 {margin-top: 10px;color: #2B93D2;}</style><script src="js/jquery-1.11.3.min.js"></script><script>$(function () {var page = 1;//初始版面为1var i = 4;//每个版面放四张图片
$(".next").click(function () {var $parent = $(this).parents(".v_show");var $contentlist = $parent.find(".v_content_list");var $content = $parent.find(".v_content");//left位置要变换的盒子var v_width = $content.width();//获取到盒子的宽度var len = $contentlist.find("li").length;//获取到li的个数var pagecount = Math.ceil(len / i);//最多能够放四张版面if(!$contentlist.is(":animated")){if(page==pagecount){//若是第四个版面
$contentlist.animate({left: '0px'}, "slow")//改变left位置,返回为第一个版面
page=1;}else{$contentlist.animate({left: '-=' + v_width}, "slow")//v_width向左减宽度
page++;}}$(".highlight_tip span").eq((page-1)).addClass("current").siblings().removeClass("current");})$(".prev").click(function () {var $parent = $(this).parents(".v_show");var $contentlist = $parent.find(".v_content_list");var $content = $parent.find(".v_content");var v_width = $content.width();var len = $contentlist.find("li").length;var pagecount = Math.ceil(len / i);if(!$contentlist.is(":animated")){if(page==1){$contentlist.animate({left: '-='+v_width*(pagecount-1)}, "slow");//改变为第四个版面
page=4;}else{$contentlist.animate({left: '+=' + v_width}, "slow")page--;}}$(".highlight_tip span").eq((page-1)).addClass("current").siblings().removeClass("current")})})</script><script></script>
</head>
<body>
<div class="v_show"><div class="v_caption"><h2 class="cartoon" alt="卡通动漫">卡通动漫</h2><div class="highlight_tip"><span class="current">0</span><span>1</span><span>2</span><span>3</span></div><div class="change_btn"><span class="prev">上一个</span><span class="next">下一个</span></div><em><a href="#">更多>></a></em></div><div class="v_content"><div class="v_content_list"><ul><li><a href="#"><img src="data:images/01.jpg" alt=""></a><h4>海贼王</h4><span>播放:<em>21456</em></span></li><li><a href="#"><img src="data:images/01.jpg" alt=""></a><h4>海贼王</h4><span>播放:<em>21456</em></span></li><li><a href="#"><img src="data:images/01.jpg" alt=""></a><h4>海贼王</h4><span>播放:<em>21456</em></span></li><li><a href="#"><img src="data:images/01.jpg" alt=""></a><h4>海贼王</h4><span>播放:<em>21456</em></span></li><li><a href="#"><img src="data:images/02.jpg" alt=""></a><h4>哆啦A梦</h4><span>播放:<em>21456</em></span></li><li><a href="#"><img src="data:images/02.jpg" alt=""></a><h4>哆啦A梦</h4><span>播放:<em>21456</em></span></li><li><a href="#"><img src="data:images/02.jpg" alt=""></a><h4>哆啦A梦</h4><span>播放:<em>21456</em></span></li><li><a href="#"><img src="data:images/02.jpg" alt=""></a><h4>哆啦A梦</h4><span>播放:<em>21456</em></span></li><li><a href="#"><img src="data:images/03.jpg" alt=""></a><h4>火影忍者</h4><span>播放:<em>21456</em></span></li><li><a href="#"><img src="data:images/03.jpg" alt=""></a><h4>火影忍者</h4><span>播放:<em>21456</em></span></li><li><a href="#"><img src="data:images/03.jpg" alt=""></a><h4>火影忍者</h4><span>播放:<em>21456</em></span></li><li><a href="#"><img src="data:images/03.jpg" alt=""></a><h4>火影忍者</h4><span>播放:<em>21456</em></span></li><li><a href="#"><img src="data:images/04.jpg" alt=""></a><h4>不晓得的</h4><span>播放:<em>21456</em></span></li><li><a href="#"><img src="data:images/04.jpg" alt=""></a><h4>不晓得的</h4><span>播放:<em>21456</em></span></li><li><a href="#"><img src="data:images/04.jpg" alt=""></a><h4>不晓得的</h4><span>播放:<em>21456</em></span></li><li><a href="#"><img src="data:images/04.jpg" alt=""></a><h4>不晓得的</h4><span>播放:<em>21456</em></span></li></ul></div></div>
</div>
</body>
</html>
锋利的jQuery幻灯片实例相关推荐
- CSS+jQuery实现滑动幻灯片实例详解
HTML部分代码 Start with having a wrapping container div called main_view , and two sections nested insid ...
- php ywsbxny cn,jquery幻灯片插件bxslider样式改进实例_jquery
本文实例讲述了jquery幻灯片插件bxslider样式改进方法,分享给大家供大家参考.具体如下: 对比了很多jquery的幻灯片,都觉得不是很好,最后发现bxslider兼容性最好,移动设备支持手动 ...
- 锋利的jquery 知识点总结
由于看的是锋利的jQuery(第二版)部分内容可能没更新, 推荐看jquery API中文文档 第一个jquery程序 // 网页中所有DOM结构绘制完成后就执行, 可能DOM元素关联的东西并没有加载 ...
- html播放ppt插件,lightslider-支持移动触摸的轻量级jQuery幻灯片插件
lightslider是一款轻量级的响应式jQuery幻灯片插件.lightslider幻灯片插件能够支持移动触摸设备,它可以制作为带缩略图的内容幻灯片,或者制作为无限循环的旋转木马.它的特点还有: ...
- slidizle – 可完全自定义jQuery幻灯片插件
jQuery.slidizle是一款可完全自定义的响应式jQuery幻灯片插件.该插件只是将一些class类放置到幻灯片的HTML标签中,用户可以通过修改这些class来修改幻灯片的外观.它的特点还有 ...
- web前端之锋利的jQuery十一:综合开发,编写购物网首页
web前端之锋利的jQuery十一:综合开发,编写购物网首页 这章主要介绍如何搭建一个前端网页,文章最后面有完整的代码,前面的主要是说明 第一步:搭建网页结构 购物网站基本上可以分为以下几部分: 头部 ...
- 小清新的jQuery 幻灯片jQuery ck-slide 图片轮播
ck_slide 是一款小清新的jQuery 幻灯片插件,它非常小巧,压缩后仅 3KB,基本功能可以满足.它支持淡入淡出/左右滚动.箭头/圆点控制.自动播放. 在线实例 默认(淡入淡出) 左右滚动 自 ...
- jQuery Ajax 实例 ($.ajax、$.post、$.get)
Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看, 地址为:h ...
- java中jquery怎么学,jQuery动画+实例
1.动画基础隐藏和显示 jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般 ...
最新文章
- nginx css 304 导致图片丢失_Nginx 从入门到实战
- linux系统模块管理
- C++面试八股文快问快答の基础篇
- 视频技术详解:RTMP H5 直播流技术解析
- (转)Http协议经典详解
- Cookie的设置获取和删除
- Spring Boot Java应用代码混淆介绍
- Cortex-M3的存储器系统
- Kaldi AMI数据集脚本学习1----cmd.sh和path.sh
- mysql order 中文版,MySQL Order By排序结果
- ezd格式文件怎么打开_EPLAN Electric P8 中的 EDZ 文件格式
- h5前端 调用手机通讯录
- 【元胞自动机】基于元胞自动机模拟交叉口右转机动车过街社会力模型matlab源码
- 【特效】UE4 Niagara 制作爆炸特效
- 能使用firebug的火狐浏览器下载地址
- 100---Python绘制圆锥体
- springboot中Excel文件导出
- python web 开发从入门到精通 pdf_Python Web开发从入门到精通
- 十个Win10使用小技巧,看看你知道哪些?
- www读取本地图片做微缩图