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 相关文章推荐
摘自百度的图片轮换效果代码
Nov 19 Javascript
JS window.opener返回父页面的应用
Oct 24 Javascript
jqgrid 编辑添加功能详细解析
Nov 08 Javascript
Javascript中this的用法详解
Sep 22 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
Mar 01 Javascript
省市二级联动小案例讲解
Jul 24 Javascript
第一个Vue插件从封装到发布
Nov 22 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
Aug 26 Javascript
vue+animation实现翻页动画
Jun 29 Javascript
vue+element实现动态加载表单
Dec 13 Vue.js
用几道面试题来看JavaScript执行机制
Apr 30 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 empty函数判断mysql表单是否为空
2010/04/12 PHP
php 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
thinkphp5 模型实例化获得数据对象的教程
2019/10/18 PHP
JQuery 入门实例1
2009/06/25 Javascript
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
js 学习笔记(三)
2009/12/29 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
jQuery File Upload文件上传插件使用详解
2016/12/06 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
2017/06/02 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
2018/04/18 jQuery
vue的token刷新处理的方法
2018/07/17 Javascript
vue实现的组件兄弟间通信功能示例
2018/12/04 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
2021/02/05 Javascript
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
python在linux中输出带颜色的文字的方法
2014/06/19 Python
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
Python随机生成数模块random使用实例
2015/04/13 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
Django 连接sql server数据库的方法
2018/06/30 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
浅谈Python脚本开头及导包注释自动添加方法
2018/10/27 Python
python 动态调用函数实例解析
2019/10/21 Python
Python实现微信表情包炸群功能
2021/01/28 Python
新加坡网上美容店:Hermo新加坡
2019/06/19 全球购物
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
沙特阿拉伯排名第一的在线时尚购物应用程序:1Zillion
2020/08/08 全球购物
租赁协议书范本
2014/04/22 职场文书
交通安全横幅标语
2014/10/07 职场文书
签字仪式主持词
2015/07/03 职场文书