JQuery 图片滚动轮播示例代码


Posted in Javascript onMarch 24, 2014

完整的项目在附件中

<!DOCTYPE html> 
<html> 
<head> 
<title>图片切换</title> 
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> 
<script type="text/javascript" > 
var num = 0 
$(function(){ 
$("div ol li").mouseover(function(e){ 
$(this).attr("class","current"); 
$(this).siblings().attr("class",""); //兄弟节点的class属性设置为空 
//alert($('ul').index()) 
num = $('ul').index() + 2 
var index = $(this).index(); //记录选定的li标签在ul中的索引 
//图片会出现层叠现象为了显示当前的图片,把当前的图片的z-index 值设置为大于其他的兄弟元素 
$("div ul li").eq(index).css({"left":"650px","zIndex":num}) 
$("div ul li").eq(index).siblings().css("zIndex",num-1); 
//动画效果,图片从右侧飞入 
$("div ul li").eq(index).animate({left:"0"},500) }); 
}); 
</script> 
<style type="text/css"> 
*{margin: 0px;padding: 0px;border: 0px;} 
ul,ol{list-style: none;} 
.all{width:650px;height: 250px;margin: 100px auto;position: relative;border: 1px solid crimson;overflow: hidden;} 
.all ul{position: relative;z-index: 1;position: relative;} 
/*子 绝 父 相*/ 
.all ul li{position: absolute;left: 0;top: 0px;} 
.all ol{position: absolute;z-index: 2; right: 10px;bottom: 10px;} 
.all ol li{width: 20px;height: 20px;background: #333;border: 1px solid #509629;font-weight: 
bold;text-align: center;line-height: 20px;float: left;margin-left: 10px;margin-top: 10px;} 
.all ol .current{width: 30px;height: 30px;line-height: 30px;border: 1px solid red;margin-top: 0px; 
cursor: pointer;} 
</style> 
</head> 
<body> 
<div class="all"> 
<ul> 
<li><img src="src/1.jpg" /></li> 
<li><img src="src/2.jpg" /></li> 
<li><img src="src/3.jpg" /></li> 
<li><img src="src/4.jpg" /></li> 
</ul> 
<ol> 
<li class="current">1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
</ol> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
Javascript实现关联数据(Linked Data)查询及注意细节
Feb 22 Javascript
getComputedStyle与currentStyle获取样式(style/class)
Mar 19 Javascript
jquery判断当前浏览器的实现代码
Nov 07 Javascript
javascript随机抽取0-100之间不重复的10个数
Feb 25 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 Javascript
每日十条JavaScript经验技巧(一)
Jun 23 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
微信小程序分页加载的实例代码
Jul 11 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
优化Vue中date format的性能详解
Jan 13 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 Javascript
微信小程序实现简单购物车功能
Dec 30 Javascript
JS中判断null、undefined与NaN的方法
Mar 24 #Javascript
jquery高级编程的最佳实践详解
Mar 23 #Javascript
js 判断浏览器使用的语言示例代码
Mar 22 #Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
Mar 22 #Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
Mar 22 #Javascript
jquery获取复选框被选中的值
Mar 22 #Javascript
纯JS实现根据CSS的class选择DOM
Mar 22 #Javascript
You might like
PHP实现MVC开发得最简单的方法――模型
2007/04/10 PHP
php array_merge下进行数组合并的代码
2008/07/22 PHP
php cookies中删除的一般赋值方法
2011/05/07 PHP
php获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
php实现的生成排列算法示例
2019/07/25 PHP
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
详解如何用webpack打包一个网站应用项目
2017/07/12 Javascript
微信小程序项目实践之验证码倒计时功能
2018/07/18 Javascript
浅谈layui 表单元素的选中问题
2019/10/25 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
简单谈谈python中的Queue与多进程
2016/08/25 Python
Python3.6正式版新特性预览
2016/12/15 Python
python中快速进行多个字符替换的方法小结
2016/12/15 Python
搞定这套Python爬虫面试题(面试会so easy)
2019/04/03 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
python 实现简易的记事本
2020/11/30 Python
Python爬虫新手入门之初学lxml库
2020/12/20 Python
python 基于PYMYSQL使用MYSQL数据库
2020/12/24 Python
美国休闲服装品牌:J.Crew Factory
2017/03/04 全球购物
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
英国书籍、CD、DVD和游戏的第一道德零售商:Awesome Books
2020/02/22 全球购物
模具数控专业自荐信
2014/01/27 职场文书
经贸专业毕业生求职信
2014/03/23 职场文书
养牛场项目建议书
2014/05/13 职场文书
经营管理策划方案
2014/05/22 职场文书
关于幸福的感言
2015/08/03 职场文书
网络安全倡议书(3篇)
2019/09/18 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS
海弦WR-800F
2022/04/05 无线电
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python