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 相关文章推荐
兼容FireFox 的 js 日历 支持时间的获取
Mar 04 Javascript
js 鼠标点击事件及其它捕获
Jun 04 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
Jul 09 Javascript
基于jquery实现图片上传本地预览功能
Jan 08 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
Aug 31 Javascript
Vue的MVVM实现方法
Aug 16 Javascript
利用纯js + transition动画实现移动端web轮播图详解
Sep 10 Javascript
解决vue数组中对象属性变化页面不渲染问题
Aug 09 Javascript
通过vue写一个瀑布流插件代码实例
Sep 07 Javascript
JavaScript原型继承和原型链原理详解
Feb 04 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
低门槛开发iOS、Android、小程序应用的前端框架详解
Oct 16 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
德生PL450的电路分析和低放电路的改进办法
2021/03/02 无线电
php的一些小问题
2010/07/03 PHP
php的常量和变量实例详解
2017/06/27 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
javascript encodeURI和encodeURIComponent的比较
2010/04/03 Javascript
让你的CSS像Jquery一样做筛选的实现方法
2011/07/10 Javascript
javascript 常用功能总结
2012/03/18 Javascript
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
js查找某元素中的所有图片地址的方法
2014/01/16 Javascript
JS实现可关闭的对联广告效果代码
2015/09/14 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
微信小程序 用户数据解密详细介绍
2017/01/09 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
微信小程序动态添加分享数据
2017/06/14 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
js前端导出Excel的方法
2017/11/01 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
python实现数通设备端口监控示例
2014/04/02 Python
Python下的subprocess模块的入门指引
2015/04/16 Python
Python 3中的yield from语法详解
2017/01/18 Python
Python 中pandas.read_excel详细介绍
2017/06/23 Python
OpenCV+Python识别车牌和字符分割的实现
2019/01/31 Python
Python去除字符串前后空格的几种方法
2019/03/04 Python
python调用pyaudio使用麦克风录制wav声音文件的教程
2019/06/26 Python
通过实例了解python property属性
2019/11/01 Python
Python键鼠操作自动化库PyAutoGUI简介(小结)
2020/05/17 Python
机电一体化职业规划书
2014/01/07 职场文书
入党积极分子介绍信
2014/01/17 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
党建工作整改措施
2014/10/28 职场文书
公司食堂管理制度
2015/08/05 职场文书
经典祝酒词大全
2015/08/12 职场文书