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 相关文章推荐
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
window.name代替cookie的实现代码
Nov 28 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
js进行表单验证实例分析
Feb 10 Javascript
详解angularJs中自定义directive的数据交互
Jan 13 Javascript
JS正则表达式判断有效数实例代码
Mar 13 Javascript
详解Vue 非父子组件通信方法(非Vuex)
May 24 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
Jul 12 Javascript
vuex 使用文档小结篇
Jan 11 Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
Nov 13 Javascript
package.json中homepage属性的作用详解
Mar 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字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
PHP查询网站的PR值
2013/10/30 PHP
php跨域cookie共享使用方法
2014/02/20 PHP
php封装的page分页类完整实例
2016/10/18 PHP
使用phpQuery获取数组的实例
2017/03/13 PHP
jquery 元素相对定位代码
2010/10/15 Javascript
加载 Javascript 最佳实践
2011/10/30 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
jQuery中的val()示例应用
2014/02/26 Javascript
Javascript中的String对象详谈
2014/03/03 Javascript
选择复选框按钮置灰否则按钮可用
2014/05/22 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
jQuery中val()方法用法实例
2014/12/25 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
原生js和css实现图片轮播效果
2017/02/07 Javascript
浅谈nodejs中的类定义和继承的套路
2017/07/26 NodeJs
JS实现div模块的截图并下载功能
2017/10/17 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
Vue 全局loading组件实例详解
2018/05/29 Javascript
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
createObjectURL方法实现本地图片预览
2019/09/30 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
Python中os和shutil模块实用方法集锦
2014/05/13 Python
用Python进行简单图像识别(验证码)
2018/01/19 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
安全标语大全
2014/06/10 职场文书
关爱残疾人标语
2014/06/25 职场文书
天坛导游词
2015/02/02 职场文书
国庆阅兵观后感
2015/06/15 职场文书
2016年第29个世界无烟日宣传活动总结
2016/04/06 职场文书
浅谈Redis在直播场景的实践方案
2021/04/27 Redis
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL