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 相关文章推荐
jquery插件开发方法(初学者)
Feb 03 Javascript
基于jquery实现的省市区级联无ajax
Sep 24 Javascript
js取值中form.all和不加all的区别介绍
Jan 20 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
Feb 27 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
JS组件Bootstrap Table使用方法详解
Feb 02 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
Jul 21 Javascript
详解关于element el-button使用$attrs的一个注意要点
Nov 09 Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
详解使用React制作一个模态框
Mar 14 Javascript
微信小程序基础教程之worker线程的使用方法
Jul 15 Javascript
JS document文档的简单操作完整示例
Jan 13 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
非洲第一个咖啡超凡杯大赛承办国—卢旺达的咖啡怎么样
2021/03/03 咖啡文化
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
PHP实现原生态图片上传封装类方法
2016/11/08 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
offsetParent 算法分析
2010/04/05 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
2011/03/28 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
jquery操作复选框checkbox的方法汇总
2015/02/05 Javascript
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
Vue.js 时间转换代码及时间戳转时间字符串
2018/10/16 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
基于Element封装一个表格组件tableList的使用方法
2020/06/29 Javascript
vue-model实现简易计算器
2020/08/17 Javascript
CentOS中使用virtualenv搭建python3环境
2015/06/08 Python
使用python和pygame绘制繁花曲线的方法
2018/02/24 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
python实现QQ空间自动点赞功能
2019/04/09 Python
python绘制评估优化算法性能的测试函数
2019/06/25 Python
Django框架基础模板标签与filter使用方法详解
2019/07/23 Python
Python用input输入列表的实例代码
2020/02/07 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
Linux如何修改文件和文件夹的权限
2013/09/05 面试题
机电专业毕业生求职信
2013/10/27 职场文书
前台领班岗位职责
2013/12/04 职场文书
英文商务邀请信
2014/01/22 职场文书
学校交通安全责任书
2014/08/25 职场文书
四年级学生期末评语
2014/12/26 职场文书
2015年妇委会工作总结
2015/05/22 职场文书
暑期家教宣传单
2015/07/14 职场文书
科普 | 业余无线电知识-波段篇
2022/02/18 无线电
CI Games宣布《堕落之王2》使用虚幻引擎5制作 预计将于2023年正式发售
2022/04/11 其他游戏