JS实现淘宝幻灯片效果的实现方法


Posted in Javascript onMarch 22, 2013

实现思路:

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>
Javascript 相关文章推荐
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
Jan 29 Javascript
javascript 全角转换实现代码
Jul 17 Javascript
extjs之去除s.gif的影响
Dec 25 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
Apr 17 Javascript
基于JavaScript自定义构造函数的详解说明
Apr 24 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
Dec 09 Javascript
浅析webapp框架AngularUI的demo
Dec 21 Javascript
js动态修改表格行colspan列跨度的方法
Mar 30 Javascript
js指定步长实现单方向匀速运动
Jul 17 Javascript
vue实现键盘输入支付密码功能
Aug 18 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
Jun 14 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
Mar 22 #Javascript
使用JavaScript构建JSON格式字符串实现步骤
Mar 22 #Javascript
鼠标滚轮控制网页横向移动实现思路
Mar 22 #Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 #Javascript
jquery文字上下滚动的实现方法
Mar 22 #Javascript
JS模块与命名空间的介绍
Mar 22 #Javascript
JS在textarea光标处插入文本的小例子
Mar 22 #Javascript
You might like
Codeigniter框架实现获取分页数据和总条数的方法
2014/12/05 PHP
纯php生成随机密码
2015/10/30 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
PHP基于phpqrcode类生成二维码的方法示例详解
2020/08/07 PHP
javascript 判断数组是否已包含了某个元素的函数
2010/05/30 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
用js实现控件的隐藏及style.visibility的使用
2013/06/14 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
将json转换成struts参数的方法
2016/11/08 Javascript
JS对象是否拥有某属性如何判断
2017/02/03 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
使用react context 实现vue插槽slot功能
2019/07/18 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
跟老齐学Python之正规地说一句话
2014/09/28 Python
python通过yield实现数组全排列的方法
2015/03/18 Python
全面了解Python环境配置及项目建立
2016/06/30 Python
Python正则表达式完全指南
2017/05/25 Python
python编写Logistic逻辑回归
2020/12/30 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
耐克美国官网:Nike.com
2016/08/01 全球购物
孕妇装中的著名品牌:Isabella Oliver(伊莎贝拉·奥利弗)
2016/10/31 全球购物
奶茶店创业计划书范文
2014/01/17 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
媒体宣传策划方案
2014/05/25 职场文书
小学运动会口号
2014/06/07 职场文书
注册资产评估专业求职信
2014/07/16 职场文书
个人先进事迹材料
2014/12/29 职场文书