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 相关文章推荐
js或css文件后面跟参数的原因说明
Jan 09 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 Javascript
实现web打印的各种方法介绍及实现代码
Jan 09 Javascript
js闭包实例汇总
Nov 09 Javascript
14个有用的Jquery技巧分享
Jan 08 Javascript
js实现表单Radio切换效果的方法
Aug 17 Javascript
jquery的幻灯片图片切换效果代码分享
Sep 07 Javascript
javascript日期比较方法实例分析
Jun 17 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
Sep 24 Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 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带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
JQuery插件Style定制化方法的分析与比较
2012/05/03 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
javascript引用类型之时间Date和数组Array
2015/08/27 Javascript
理解javascript对象继承
2016/04/17 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
详解Vue中的watch和computed
2020/11/09 Javascript
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
Python数据结构之图的应用示例
2018/05/11 Python
Django 路由控制的实现代码
2018/11/08 Python
对python3 中方法各种参数和返回值详解
2018/12/15 Python
Python实现简单层次聚类算法以及可视化
2019/03/18 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
Pytorch evaluation每次运行结果不同的解决
2020/01/02 Python
Pytorch提取模型特征向量保存至csv的例子
2020/01/03 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
详解解决jupyter不能使用pytorch的问题
2021/02/18 Python
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
2020/04/08 HTML / CSS
怎样声明一个匿名的内部类
2016/06/01 面试题
质检员岗位职责
2013/12/17 职场文书
《动手做做看》教学反思
2014/04/09 职场文书
安全责任书范文
2014/08/25 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
浅析InnoDB索引结构
2021/04/05 MySQL