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 相关文章推荐
ExtJS4给Combobox设置列表中的默认值示例
May 02 Javascript
express的中间件bodyParser详解
Dec 04 Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
Jun 14 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 Javascript
js动态生成form 并用ajax方式提交的实现方法
Sep 09 Javascript
Javascript之深入浅出prototype
Feb 06 Javascript
JavaScript正则表达式和级联效果
Sep 14 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
Vue.js实现大转盘抽奖总结及实现思路
Oct 09 Javascript
npx create-react-app xxx创建项目报错的解决办法
Feb 17 Javascript
javascript canvas封装动态时钟
Sep 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
咖啡历史、消费和行业趋势
2021/03/03 咖啡文化
coreseek 搜索英文的问题详解
2013/06/08 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
php5与php7的区别点总结
2019/10/11 PHP
PHP7新特性
2021/03/09 PHP
js 发个判断字符串是否为符合标准的函数
2009/04/27 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
使用jquery实现简单的ajax
2013/07/08 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
JS案例分享之金额小写转大写
2014/05/15 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
jQuery根据name属性进行查找的用法分析
2016/06/23 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
基于JS实现仿百度百家主页的轮播图效果
2017/03/06 Javascript
浅谈react.js中实现tab吸顶效果的问题
2017/09/06 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
2018/10/22 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
wx-charts 微信小程序图表插件的具体使用
2019/08/18 Javascript
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
在Django框架中运行Python应用全攻略
2015/07/17 Python
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
python 变量初始化空列表的例子
2019/11/28 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
基于django和dropzone.js实现上传文件
2020/11/24 Python
高一历史教学反思
2014/01/13 职场文书
小学师德师风整改措施
2014/10/27 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
创业计划书之书店
2019/09/10 职场文书