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+CSS 实现遮罩层的简单代码
Oct 14 Javascript
详解JavaScript中getFullYear()方法的使用
Jun 10 Javascript
JS &amp; JQuery 动态添加 select option
Jun 08 Javascript
localStorage实现便签小程序
Nov 28 Javascript
微信小程序开发教程-手势解锁实例
Jan 06 Javascript
Node.js Express 框架 POST方法详解
Jan 23 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
May 20 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
深入理解Node module模块
Mar 26 Javascript
JavaScript禁用右键单击优缺点分析
Jan 20 Javascript
详解javascript replace高级用法
Feb 17 Javascript
vue实现图片上传功能
May 28 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
使用JSON实现数据的跨域传输的php代码
2011/12/20 PHP
PHP基础教程(php入门基础教程)一些code代码
2013/01/06 PHP
ThinkPHP自动填充实现无限级分类的方法
2014/08/22 PHP
ThinkPHP 表单自动验证运用示例
2014/10/13 PHP
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
PHP 微信扫码支付源代码(推荐)
2016/11/03 PHP
PHP实现找出链表中环的入口节点
2018/01/16 PHP
js实现iframe动态调整高度的代码
2008/01/06 Javascript
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
extjs render 用法介绍
2013/09/11 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
微信js-sdk上传与下载图片接口用法示例
2016/10/12 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
2017/01/16 Javascript
微信小程序之MaterialDesign--input组件详解
2017/02/15 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
Angular开发实践之服务端渲染
2018/03/29 Javascript
简述JS控制台的使用
2018/07/15 Javascript
微信小程序实现的canvas合成图片功能示例
2019/05/03 Javascript
python检测远程端口是否打开的方法
2015/03/14 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
python画蝴蝶曲线图的实例
2019/11/21 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
2019/04/26 HTML / CSS
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
威尔逊皮革:Wilsons Leather
2018/12/07 全球购物
作风建设演讲稿
2014/05/23 职场文书
七夕活动策划方案
2014/08/16 职场文书
先进事迹演讲稿
2014/09/01 职场文书
2015年社区纪检工作总结
2015/04/21 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电
python数字图像处理:图像简单滤波
2022/06/28 Python