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 相关文章推荐
js中几种去掉字串左右空格的方法
Dec 25 Javascript
JavaScript Event学习第六章 事件的访问
Feb 07 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
javascript动态添加checkbox复选框的方法
Dec 23 Javascript
使用bootstrap实现多窗口和拖动效果
Sep 22 Javascript
Vue脚手架的简单使用实例
Jul 10 Javascript
js事件on动态绑定数据,绑定多个事件的方法
Sep 15 Javascript
webpack dll打包重复问题优化的解决
Oct 10 Javascript
JavaScript变量基本使用方法实例分析
Nov 15 Javascript
angularjs模态框的使用代码实例
Dec 20 Javascript
微信小程序实现聊天室
Aug 21 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
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
php字符集转换
2017/01/23 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
js获得页面的高度和宽度的方法
2014/02/23 Javascript
javascript实现时间格式输出FormatDate函数
2015/01/13 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
2015/11/18 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
2016/03/30 Javascript
js精准的倒计时函数分享
2016/06/29 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
Zepto实现密码的隐藏/显示
2017/04/07 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
vue.js 中使用(...)运算符报错的解决方法
2018/08/09 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2018/08/20 Javascript
vue数据响应式原理知识点总结
2020/02/16 Javascript
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
Python实现读取及写入csv文件的方法示例
2018/01/12 Python
Python实现识别手写数字大纲
2018/01/29 Python
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
python yield和Generator函数用法详解
2020/02/10 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
python实现图片转换成素描和漫画格式
2020/08/19 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
call在Python中改进数列的实例讲解
2020/12/09 Python
《大海那边》教学反思
2014/04/09 职场文书
骨干教师培训方案
2014/05/06 职场文书
毕业生见习报告总结
2014/11/08 职场文书
三方合作意向书范本
2015/05/09 职场文书
素质教育学习心得体会
2016/01/19 职场文书