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 相关文章推荐
40款非常有用的 jQuery 插件推荐(系列一)
Dec 21 Javascript
利用json获取字符出现次数的代码
Mar 22 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
Dec 21 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
Aug 14 Javascript
javascript实现点击后变换按钮显示文字的方法
May 13 Javascript
jquery任意位置浮动固定层插件用法实例
May 29 Javascript
理解JavaScript原型链
Oct 25 Javascript
JS实现页面内跳转的简单代码
Sep 03 Javascript
微信小程序实现图片上传
May 23 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
Jun 05 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
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
星际中一些鲜为人知的详细资料
2020/03/04 星际争霸
PHP实现读取一个1G的文件大小
2013/08/24 PHP
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
PHP比较运算符的详细介绍
2015/09/29 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
JavaScript聚焦于第一个字段的代码
2010/10/15 Javascript
JS 控制小数位数的实现代码
2011/08/02 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
2013/02/01 Javascript
jQuery实现的多选框多级联动插件
2014/05/02 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
2016/12/08 Javascript
js自定义QQ菜单效果
2017/01/10 Javascript
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
实现elementUI表单的全局验证的方法步骤
2019/04/29 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛 5 24 iG VS DK
2014/05/26 DOTA
[01:07:21]NAVI vs VG Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
python利用dir函数查看类中所有成员函数示例代码
2017/09/08 Python
详解python eval函数的妙用
2017/11/16 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
Python中super函数用法实例分析
2019/03/18 Python
python3 googletrans超时报错问题及翻译工具优化方案 附源码
2020/12/23 Python
美国第二大连锁药店:Rite Aid
2019/04/03 全球购物
好家长事迹材料
2014/01/23 职场文书
个性发展自我评价
2014/02/11 职场文书
经济国贸专业求职信
2014/06/18 职场文书
兴趣班停课通知
2015/04/24 职场文书
Go语言 详解net的tcp服务
2022/04/14 Golang