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 相关文章推荐
js 蒙版进度条(结合图片)
Mar 10 Javascript
jQuery 关于伪类选择符的使用说明
Apr 24 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
js弹出div并显示遮罩层
Feb 12 Javascript
Javascript字符串对象的常用方法简明版
Jun 26 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
jQuery读取XML文件的方法示例
Feb 03 Javascript
vue中使用gojs/jointjs的示例代码
Aug 24 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
基于JS实现简单滑块拼图游戏
Oct 12 Javascript
OpenLayers3加载常用控件使用方法详解
Sep 25 Javascript
AudioContext 实现音频可视化(web技术分享)
Feb 24 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
如何给phpcms v9增加类似于phpcms 2008中的关键词表
2013/07/01 PHP
php fsockopen解决办法 php实现多线程
2014/01/20 PHP
浅谈php安全性需要注意的几点事项
2014/07/17 PHP
PHP将字符分解为多个字符串的方法
2014/11/22 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
23个Javascript弹出窗口特效整理
2011/02/25 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
浅谈移动端之js touch事件 手势滑动事件
2016/11/07 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
Vue2.0组件间数据传递示例
2017/03/07 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
Vue实现双向数据绑定
2017/05/03 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
python编程实现归并排序
2017/04/14 Python
Python中用post、get方式提交数据的方法示例
2017/09/22 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
python实现俄罗斯方块小游戏
2020/04/24 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
复古风格的女装和装饰品:ModCloth
2017/12/29 全球购物
Annoushka英国官网:英国奢侈珠宝品牌
2018/10/20 全球购物
教师党员思想汇报
2014/01/06 职场文书
便利店投资的创业计划书
2014/01/12 职场文书
12月红领巾广播稿
2014/02/13 职场文书
品牌推广活动策划方案
2014/08/19 职场文书
师德师风剖析材料
2014/09/30 职场文书
学习群众路线的心得体会
2014/11/05 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
小平小道观后感
2015/06/09 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers