专栏首页前端知识分享第58天:简单焦点轮播图

第58天:简单焦点轮播图

一、轮播图无缝滚动

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>

运行效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 第31天:动态生成节点-京东轮播图创建

    一、获取节点属性 getAttribute()通过这个方法可以得到某些元素的某些属性 alert(demo.getAttribute("class"));

    半指温柔乐
  • 第32天:微博发布动态

    半指温柔乐
  • 第1天:CSS基本样式

    记住:浏览器有默认margin和padding。样式最开始记得一定写:*{margin:0;padding:0}。

    半指温柔乐
  • 前有围堵后有追兵,白盒化下的交换机市场老大思科

    在交换机领域,思科是绝对的“龙头老大”,一直牢牢占据着交换机市场的第一份额。但前段时间爆发的关于亚马逊AWS考虑以低价将自己的网络交换机出售给企业客户的传闻,造...

    SDNLAB
  • 白盒网络设备如何影响网络

    SDNLAB
  • \x 开头编码的数据解码成中文

    在python里,直接decode('utf-8')即可 >>> "\xE5\x85\x84\xE5\xBC\x9F\xE9\x9A\xBE\xE5\xBD\x...

    用户1177380
  • html5+CSS3+JS实现七夕言情功能代码

    因为今天2月14日是情人节,作为我这个程序猿一枚也不甘落后,还有一颗脱单的心,下面小编给大家制作了基于html5+css3+js实现的情人节特效,具体实例代码,...

    用户7293182
  • CSS3中transition、transform傻傻分不清楚

    css属性很多,无论是字母的拼写还是字面上的意思,很多人都容易混淆,包括我在内,也时不时需要去看看到底是咋回事,是不是也混淆过你~ 下面列举几个最容易混淆的属...

    Javanx
  • SpringBoot入门建站全系列(二十四)使用Sharding-JDBC进行分库分表

    一个系统最初的线上业务量并不会很大,比如说单库的数据量在百万级别以下(事实上千万级别以下都还能支撑),那么MySQL的单库即可完成任何增/删/改/查的业务操作。...

    品茗IT
  • SpringBoot入门建站全系列(二十四)使用Sharding-JDBC进行分库分表

    一个系统最初的线上业务量并不会很大,比如说单库的数据量在百万级别以下(事实上千万级别以下都还能支撑),那么MySQL的单库即可完成任何增/删/改/查的业务操作。...

    品茗IT

扫码关注云+社区

领取腾讯云代金券