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将文本转化成JSON对象需要注意的问题
May 09 Javascript
jQuery中的val()示例应用
Feb 26 Javascript
js/jquery判断浏览器类型的方法小结
May 12 Javascript
javascript中基本类型和引用类型的区别分析
May 12 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
Jul 06 Javascript
轻松掌握JavaScript代理模式
Aug 26 Javascript
JS实现利用两个队列表示一个栈的方法
Dec 13 Javascript
vue axios 在页面切换时中断请求方法 ajax
Mar 05 Javascript
Vue 实现手动刷新组件的方法
Feb 19 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
May 23 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
Jun 05 Javascript
使用AutoJs实现微信抢红包的代码
Dec 31 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
Ajax+PHP 边学边练 之二 实例
2009/11/24 PHP
PHP学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
用Zend Studio+PHPnow+Zend Debugger搭建PHP服务器调试环境步骤
2014/01/19 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
PHP结合JQueryJcrop实现图片裁切实例详解
2014/07/24 PHP
PHP实现清除wordpress里恶意代码
2015/10/21 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
在html页面中包含共享页面的方法
2008/10/24 Javascript
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
JavaScript对象学习经验整理
2013/10/12 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
JavaScript阻止事件冒泡示例分享
2014/12/28 Javascript
JavaScript浏览器对象之一Window对象详解
2016/06/03 Javascript
jQuery1.9+中删除了live以后的替代方法
2016/06/17 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
Vue插件打包与发布的方法示例
2018/08/20 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
2019/01/29 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
Python转码问题的解决方法
2008/10/07 Python
Python实现将xml导入至excel
2015/11/20 Python
关于Python 3中print函数的换行详解
2017/08/08 Python
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
对python修改xml文件的节点值方法详解
2018/12/24 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
在python中使用nohup命令说明
2020/04/16 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
国际知名设计师时装商店:Coggles
2016/09/05 全球购物
聘任书模板
2014/03/29 职场文书
中学生社会实践活动总结
2014/07/03 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
2015年物业管理工作总结
2015/04/23 职场文书
学习雷锋精神倡议书
2015/04/27 职场文书
鲁冰花观后感
2015/06/10 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书