JS实现淘宝幻灯片效果的实现方法
2013-03-22 00:00
836 查看
实现思路:
1、for循环给数字按钮加上点击事件。
2.for循环先把按钮的样式清空,再把当前样式设置样式。
3、给每个按钮添加自定义属性index aBtn[i].index=i aBtn[2]=2 第二个按钮和第二张图片想对应,用运动框架把大图的UL每次移动-150px,因为图片高度是150px。如果移动到第n张图片就是-150*n。
4、定义变量now,用来自动播放用的。把当前图片赋值给now now=this.index。
5、定义自动播放函数。now++ 下一张,if判断,到最后一张图片的时候就把now设置为0,就是第一张。 if(now==aBtn.length)
6、定义定时器,每2秒就调用一次自动播放函数。
7、鼠标指向图片时就清除定时器。
8、鼠标离开图片时就开启定时器。
完整代码:
1、for循环给数字按钮加上点击事件。
2.for循环先把按钮的样式清空,再把当前样式设置样式。
3、给每个按钮添加自定义属性index aBtn[i].index=i aBtn[2]=2 第二个按钮和第二张图片想对应,用运动框架把大图的UL每次移动-150px,因为图片高度是150px。如果移动到第n张图片就是-150*n。
4、定义变量now,用来自动播放用的。把当前图片赋值给now now=this.index。
5、定义自动播放函数。now++ 下一张,if判断,到最后一张图片的时候就把now设置为0,就是第一张。 if(now==aBtn.length)
6、定义定时器,每2秒就调用一次自动播放函数。
7、鼠标指向图片时就清除定时器。
8、鼠标离开图片时就开启定时器。
<script> window.onload=function() { var oDiv=document.getElementById('play'); var aBtn=oDiv.getElementsByTagName('ol')[0].getElementsByTagName('li'); var oUl=oDiv.getElementsByTagName('ul')[0]; var now=0; for(var i=0;i<aBtn.length;i++) { aBtn[i].index=i; aBtn[i].onmouseover=function() { now=this.index; //当前值赋给now tab(); } }; function tab() { for(var i=0;i<aBtn.length;i++) { aBtn[i].className=''; //把所有按钮的样式清空 }; aBtn[now].className='active'; //当前按钮样式设置 startMove(oUl,{top:-150*now}); //用运动框架把UL的TOP设置为当前个数*-150,第三张图片就是2*-150 }; function next() { now++; //切换图片 if(now==aBtn.length) //如果到了最后一张图片 { now=0; // 把图片拉回第一张 } tab(); //把图片拉回第一张后继续运动 }; var timer=setInterval(next,2000); //2秒自动切换图片 oDiv.onmouseover=function() { clearInterval(timer); //清除定时器 }; oDiv.onmouseout=function() { timer=setInterval(next,2000); //开启定时器 }; }; </script>
完整代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>淘宝幻灯片上下滑动效果 ―― www.zhinengshe.com ―― 智能课堂</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<script src="baseCommon.js"></script><script> window.onload=function() { var oDiv=document.getElementById('play'); var aBtn=oDiv.getElementsByTagName('ol')[0].getElementsByTagName('li'); var oUl=oDiv.getElementsByTagName('ul')[0]; var now=0; for(var i=0;i<aBtn.length;i++) { aBtn[i].index=i; aBtn[i].onmouseover=function() { now=this.index; //当前值赋给now tab(); } }; function tab() { for(var i=0;i<aBtn.length;i++) { aBtn[i].className=''; //把所有按钮的样式清空 }; aBtn[now].className='active'; //当前按钮样式设置 startMove(oUl,{top:-150*now}); //用运动框架把UL的TOP设置为当前个数*-150,第三张图片就是2*-150 }; function next() { now++; //切换图片 if(now==aBtn.length) //如果到了最后一张图片 { now=0; // 把图片拉回第一张 } tab(); //把图片拉回第一张后继续运动 }; var timer=setInterval(next,2000); //2秒自动切换图片 oDiv.onmouseover=function() { clearInterval(timer); //清除定时器 }; oDiv.onmouseout=function() { timer=setInterval(next,2000); //开启定时器 }; }; </script> </head>
<body>
<div class="play" id="play">
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<ul>
<li><a href="http://www.zhinengshe.com/"><img src="images/1.jpg" alt="广告一" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="images/2.jpg" alt="广告二" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="images/3.jpg" alt="广告三" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="images/4.jpg" alt="广告四" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="images/5.jpg" alt="广告五" /></a></li>
</ul>
</div>
</body>
</html>
相关文章推荐
- JS实现淘宝幻灯片效果的实现方法
- JS实现淘宝幻灯片效果
- JS实现FLASH幻灯片图片切换效果的方法
- [转载]javascript练习(二)JS实现淘宝幻灯片效果
- JS实现FLASH幻灯片图片切换效果的方法
- JS实现淘宝支付宝网站的控制台菜单效果
- js实现淘宝首页图片轮播效果
- JS实现鼠标箭头变成一个燃烧烛光效果的方法
- JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
- js实现图片漂浮效果的方法
- js实现宇宙星空背景效果的方法
- js实现模拟计算器退格键删除文字效果的方法
- js实现仿QQ秀换装效果的方法
- JS+CSS实现Li列表隔行换色效果的方法
- js操作css属性实现div层展开关闭效果的方法
- 使用MVC中的HtmlHelper对象的ActionLink方法,实现一个Javascript:void(0)效果,去调用一个JS方法
- JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
- JS+CSS3实现带预览图幻灯片效果
- js计时器实现页面刷新和幻灯片效果