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原生和jquery库实现iframe自适应高度和宽度
Jul 18 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
Nov 23 Javascript
js数组依据下标删除元素
Apr 14 Javascript
jQuery实现不断闪烁文字的方法
May 15 Javascript
jstl中判断list中是否包含某个值的简单方法
Oct 14 Javascript
谈谈对vue响应式数据更新的误解
Aug 01 Javascript
javascript 取小数点后几位几种方法总结
Aug 02 Javascript
Vue+Element使用富文本编辑器的示例代码
Aug 14 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
Nov 05 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 Javascript
详细教你微信公众号正文页SVG交互开发技巧
Jul 25 Javascript
小程序简单两栏瀑布流效果的实现
Dec 18 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类Class的概念
2012/06/14 PHP
PHP中Array相关函数简介
2016/07/03 PHP
php变量与JS变量实现不通过跳转直接交互的方法
2017/08/25 PHP
PHP实现15位身份证号转18位的方法分析
2019/10/16 PHP
更优雅的事件触发兼容
2011/10/24 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
2012/08/10 Javascript
js根据日期判断星座的示例代码
2014/01/23 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
微信小程序 检查接口状态实例详解
2017/06/23 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
微信小程序中换行空格(多个空格)写法详解
2018/07/10 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
[42:52]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python判断两个对象相等的原理
2017/12/12 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
Python如何发布程序的详细教程
2018/10/09 Python
python+django+selenium搭建简易自动化测试
2020/08/19 Python
python中xlrd模块的使用详解
2021/02/01 Python
解析HTML5中的新功能本地存储localStorage
2016/03/01 HTML / CSS
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
幼师自荐信
2013/10/26 职场文书
门卫岗位职责
2013/11/15 职场文书
个人授权委托书范本
2014/04/03 职场文书
爱心捐款倡议书
2014/04/14 职场文书
2014院党委领导班子及其成员群众路线对照检查材料思想汇报
2014/10/04 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
助学感谢信范文
2015/01/21 职场文书
单位综合评价意见
2015/06/05 职场文书
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python
如何更改Win11声音输出设备?Win11声音输出设备四种更改方法
2022/04/08 数码科技
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers