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 相关文章推荐
Jquery中dialog属性小记
Sep 03 Javascript
得到form下的所有的input的js代码
Nov 07 Javascript
JS之Date对象和获取系统当前时间详解
Jan 13 Javascript
JavaScript删除指定子元素代码实例
Jan 13 Javascript
浅谈js的url解析函数封装
Jun 28 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
微信小程序使用Promise简化回调
Feb 06 Javascript
ndm:NPM的桌面GUI应用程序
Oct 15 Javascript
详解小程序循环require之坑
Mar 08 Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 Javascript
用JS创建一个录屏功能
Nov 11 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下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
ThinkPHP框架整合微信支付之JSAPI模式图文详解
2019/04/09 PHP
javascript内置对象arguments详解
2014/03/16 Javascript
浅谈JavaScript Array对象
2014/12/29 Javascript
jQuery中last()方法用法实例
2015/01/06 Javascript
学习JavaScript设计模式(代理模式)
2015/12/03 Javascript
jquery trigger函数执行两次的解决方法
2016/02/29 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
2017/03/09 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
JavaScript实现各种排序的代码详解
2017/08/28 Javascript
浅谈redux以及react-redux简单实现
2018/08/28 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
JavaScript switch语句使用方法简介
2019/12/30 Javascript
js实现计算器功能
2020/08/10 Javascript
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
东方通信股份有限公司VC面试题
2014/08/27 面试题
酷瑞网络科技面试题
2012/03/30 面试题
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
小学教师培训感言
2014/02/11 职场文书
我们的节日端午节活动方案
2014/03/02 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
湖南省召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
2014年生活老师工作总结
2014/12/23 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android
python神经网络 使用Keras构建RNN训练
2022/05/04 Python