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 UrlDecode函数代码
Jan 09 Javascript
jquery ajax执行后台方法
Mar 18 Javascript
jQuery 学习第五课 Ajax 使用说明
May 17 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
微信JS接口汇总及使用详解
Jan 09 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 Javascript
jQuery Chosen通用初始化
Mar 07 Javascript
angular内置provider之$compileProvider详解
Sep 27 Javascript
webpack配置打包后图片路径出错的解决
Apr 26 Javascript
JS document文档的简单操作完整示例
Jan 13 Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 Javascript
基于vue hash模式微信分享#号的解决
Sep 07 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
让codeigniter与swfupload整合的最佳解决方案
2014/06/12 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
PHP如何实现阿里云短信sdk灵活应用在项目中的方法
2019/06/14 PHP
jQuery根据纬度经度查看地图处理程序
2013/05/08 Javascript
JS冒泡事件的快速解决方法
2013/12/16 Javascript
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
2016/05/25 Javascript
js 实现数值的千分位及保存小数方法(推荐)
2016/08/01 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
2017/04/19 Javascript
简单谈谈axios中的get,post方法
2017/06/25 Javascript
Express系列之multer上传的使用
2017/10/27 Javascript
jQuery 选择器用法基础入门示例
2020/01/04 jQuery
浅谈vue 二级路由嵌套和二级路由高亮问题
2020/08/06 Javascript
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
python使用matplotlib绘制折线图教程
2017/02/08 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
python3 enum模块的应用实例详解
2019/08/12 Python
Python timeit模块原理及使用方法
2020/10/10 Python
python中使用.py配置文件的方法详解
2020/11/23 Python
任意存:BOXFUL
2018/05/21 全球购物
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
六年级学生评语
2014/04/22 职场文书
市场营销战略计划书
2014/05/06 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL
mybatis3中@SelectProvider传递参数方式
2021/08/04 Java/Android