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 07 Javascript
JSON辅助格式化处理方法
Mar 26 Javascript
SuperSlide2实现图片滚动特效
Jun 20 Javascript
jQuery取得设置清空select选择的文本与值
Jul 08 Javascript
javascript父、子页面交互技巧总结
Aug 08 Javascript
Node.js实现文件上传
Jul 05 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 Javascript
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
vue 自定义右键样式的实例代码
Nov 06 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
May 09 Javascript
详解Vite的新体验
Feb 22 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
Discuz 6.0+ 批量注册用户名
2009/09/13 PHP
php中字符集转换iconv函数使用总结
2014/10/11 PHP
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
显示js对象所有属性和方法的函数
2009/10/16 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
JavaScript事件代理和委托详解
2016/04/08 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
2016/05/09 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
js实现水平滚动菜单导航
2017/07/21 Javascript
Vue.js简易安装和快速入门(第二课)
2017/10/17 Javascript
基于vue中解决v-for使用报红并出现警告的问题
2018/03/03 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
Django1.7+python 2.78+pycharm配置mysql数据库教程
2014/11/18 Python
python smtplib发送带附件邮件小程序
2018/05/22 Python
python读取txt文件,去掉空格计算每行长度的方法
2018/12/20 Python
详解pandas的外部数据导入与常用方法
2019/05/01 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
2020/08/24 HTML / CSS
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
一套软件开发工程师笔试题
2015/05/18 面试题
公开服务承诺制度
2014/03/26 职场文书
2015年度个人思想工作总结
2015/04/08 职场文书
2015年学校安全管理工作总结
2015/05/11 职场文书
招商银行工作证明
2015/06/17 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
技能培训通讯稿
2015/07/18 职场文书
事业单位岗位说明书
2015/10/08 职场文书
2016年八一建军节活动总结
2016/04/05 职场文书
虚拟机linux端mysql数据库无法远程访问的解决办法
2021/05/26 MySQL
MySQL 聚合函数排序
2021/07/16 MySQL
java设计模式--原型模式详解
2021/07/21 Java/Android