首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >第58天:简单焦点轮播图

第58天:简单焦点轮播图

作者头像
半指温柔乐
发布2018-09-11 14:55:53
1.2K0
发布2018-09-11 14:55:53
举报
文章被收录于专栏:前端知识分享前端知识分享

一、轮播图无缝滚动

1、获取元素,动态生成节点

2、匀速运动动画

3、调用动画函数

4、添加定时器,自动播放

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>无标题文档</title>
  6 <style type="text/css">
  7 *{ padding:0; margin:0; list-style:none; border:0;}
  8 .all{
  9   width:500px;
 10   height:200px;
 11   padding:7px;
 12   border:1px solid #ccc;
 13   margin:100px auto;
 14   position:relative;
 15 }
 16 .screen{
 17     width:500px;
 18     height:200px;
 19      overflow:hidden; 
 20     position:relative;
 21 }
 22 
 23 .screen li{ width:500px; height:200px; overflow:hidden; float:left;}
 24 .screen ul{ position:absolute; left:0; top:0px; width:3000px;}
 25 .all ol{ position:absolute; right:10px; bottom:10px; line-height:20px; text-align:center;}
 26 .all ol li{ float:left; width:20px; height:20px; background:#fff; border:1px solid #ccc; margin-left:10px; cursor:pointer;}
 27 .all ol li.current{ background:yellow;}
 28 
 29 </style>
 30 <script type="text/javascript">
 31     function animate(obj,target){
 32         clearInterval(obj.timer);  // 先清除定时器
 33         var speed = obj.offsetLeft < target ? 15 : -15;  // 用来判断 应该 +  还是 -
 34         obj.timer = setInterval(function() {
 35             var result = target - obj.offsetLeft; // 因为他们的差值不会超过5
 36             obj.style.left = obj.offsetLeft + speed + "px";
 37             if(Math.abs(result)<=15)  // 如果差值不小于 5 说明到位置了
 38             {
 39                 clearInterval(obj.timer);
 40                 obj.style.left = target + "px";  // 有5像素差距   我们直接跳转目标位置
 41             }
 42         },10)
 43     }
 44     window.onload = function() {
 45        // 获取元素
 46         var box = document.getElementById("all");  // 大盒子
 47         var ul = document.getElementById("ul");
 48         var ulLis = ul.children;
 49 
 50        // 操作元素
 51 
 52        // 因为我们要做无缝滚动  ,所以要克隆第一张,放到最后一张后面去
 53        // a.appendchild(b)   把 b 放到 a 的最后面
 54         // 1. 克隆完毕
 55         ul.appendChild(ul.children[0].cloneNode(true));
 56 
 57         // 2. 创建 ol  和  小 li
 58         console.log(ulLis.length);
 59         var ol = document.createElement("ol");  // 生成的是ol
 60         box.appendChild(ol); // 把ol 追加到  box 里面
 61         for(var i=0;i<ulLis.length-1;i++)
 62         {
 63             var li = document.createElement("li");
 64             li.innerHTML = i + 1;  //  给里面小的li 文字  1 2 3 4 5
 65             ol.appendChild(li);  // 添加到 ol 里面
 66         }
 67         ol.children[0].className = "current";
 68 
 69         //3. 开始动画部分
 70         var olLis = ol.children;
 71          for(var i=0; i<olLis.length;i++)
 72          {
 73              olLis[i].index = i;  // 获得当前第几个小li 的索引号
 74              olLis[i].onmouseover = function() {
 75                  for(var j=0;j<olLis.length;j++)
 76                  {
 77                      olLis[j].className = "";  // 所有的都要清空
 78                  }
 79                  this.className = "current";
 80                  animate(ul,-this.index*500);
 81                  // 调用动画函数  第一个参数  谁动画     第二个  走多少
 82                  square = key = this.index;  // 当前的索引号为主
 83              }
 84          }
 85          //  4. 添加定时器
 86         var timer = null;   // 轮播图的定时器
 87         var key = 0;  //控制播放张数
 88         var square = 0; // 控制小方块
 89           timer = setInterval(autoplay,1000);  // 开始轮播图定时器
 90           function autoplay() {
 91               key++;  // 先 ++
 92               if(key>ulLis.length - 1)  // 后判断
 93               {
 94                   ul.style.left = 0;  // 迅速调回
 95                   key = 1;  // 因为第6张就是第一张  第6张播放 下次播放第2张
 96               }
 97               animate(ul,-key*500);  // 再执行
 98               // 小方块
 99               square++;
100               if(square > olLis.length -1)
101               {
102                   square = 0;
103               }
104               for(var i=0;i<olLis.length;i++)   // 先清除所有的
105               {
106                   olLis[i].className = "";
107               }
108               olLis[square].className = "current";  // 留下当前的
109           }
110           //last最后  鼠标经过大盒子要停止定时器
111          box.onmouseover = function() {
112              clearInterval(timer);
113          }
114          box.onmouseout = function() {
115              timer = setInterval(autoplay,1000);  // 开始轮播图定时器
116          }
117     }
118 </script>
119 
120 </head>
121 
122 <body>
123 <div class="all" id='all'>
124     <div class="screen">
125         <ul id="ul">
126             <li><img src="images/taobao/1.jpg" width="500" height="200" /></li>
127             <li><img src="images/taobao/2.jpg" width="500" height="200" /></li>
128             <li><img src="images/taobao/3.jpg" width="500" height="200" /></li>
129             <li><img src="images/taobao/4.jpg" width="500" height="200" /></li>
130             <li><img src="images/taobao/5.jpg" width="500" height="200" /></li>
131         </ul>
132     </div>
133 
134 </div>
135 </body>
136 </html>

运行效果:

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-10-19 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档