原生JS写轮播图

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>轮播图</title>  
  6.     <style>  
  7.         *{  
  8.             margin: 0;  
  9.             padding: 0;  
  10.         }  
  11.         .cantiner{  
  12.             margin: 0 auto;  
  13.             width: 600px;  
  14.             height: 400px;  
  15.             overflow: hidden;  
  16.             position: relative;  
  17.         }  
  18.         .imgs{  
  19.             width: 1000%;  
  20.             height: 100%;  
  21.             position: absolute;  
  22.             top: 0;  
  23.             left: 0;  
  24.             font-size: 0;  
  25.         }  
  26.         .imgs>li{  
  27.             width: 10%;  
  28.             height: 100%;  
  29.             display: inline-block;  
  30.         }  
  31.         .left,.right{  
  32.             cursor: pointer;  
  33.             display: block;  
  34.             width: 50px;  
  35.             height: 100px;  
  36.             position: absolute;  
  37.             top: 50%;  
  38.             margin-top: -50px;  
  39.             line-height: 100px;  
  40.             text-align: center;  
  41.             color: #fff;  
  42.             font-size: 30px;  
  43.             background-color: rgba(0,0,0,.6);  
  44.         }  
  45.         .left{  
  46.             left: 0;  
  47.               
  48.         }  
  49.         .right{  
  50.             right: 0;  
  51.         }  
  52.         .point{  
  53.             position: absolute;  
  54.             width: 100%;  
  55.             text-align: center;  
  56.             height: 15px;  
  57.             bottom: 40px;  
  58.             font-size: 0;  
  59.         }  
  60.         .point>li{  
  61.             display: inline-block;  
  62.             width: 15px;  
  63.             height: 15px;  
  64.             background-color: #ccc;  
  65.             border-radius: 50% 50%;  
  66.             margin: 0 10px;   
  67.             cursor: pointer;  
  68.         }  
  69.         .point>.on{  
  70.             background-color: orange;  
  71.         }  
  72.     </style>  
  73. </head>  
  74. <body>  
  75.     <div class="cantiner">  
  76.         <ul class="imgs">  
  77.             <li><img src="img/timg.jpg" alt=""></li>  
  78.             <li><img src="img/timg1.jpg" alt=""></li>  
  79.             <li><img src="img/timg2.jpg" alt=""></li>  
  80.             <li><img src="img/timg3.jpg" alt=""></li>  
  81.             <li><img src="img/timg4.jpg" alt=""></li>  
  82.             <li><img src="img/timg.jpg" alt=""></li>  
  83.         </ul>  
  84.         <span class="left"><</span>  
  85.         <span class="right">></span>  
  86.         <ul class="point">  
  87.             <li class="on"></li>  
  88.             <li></li>  
  89.             <li></li>  
  90.             <li></li>  
  91.             <li></li>  
  92.         </ul>  
  93.     </div>  
  94.     <script>  
  95.         var win = document.querySelector(".cantiner");  
  96.         var imgs = document.querySelector(".imgs");  
  97.         var left = document.querySelector(".left");  
  98.         var right = document.querySelector(".right");  
  99.         var point = document.getElementsByClassName("point")[0].children;  
  100.         var index = 0;//图片下标  
  101.         var Wnum = win.offsetWidth;//视口宽度  
  102.         var times;//声明一个时间函数的变量  
  103.         var time;//自动轮播时间方法  
  104.         var Crun = true;//点击事件判断  
  105.         //console.log(start)  
  106.         function run(){//轮播  
  107.            var start = imgs.offsetLeft;//开始坐标  
  108.            var end = index*Wnum*(-1);//结束坐标,往右移动所以为负  
  109.            var runD = end - start;//移动距离  
  110.            var px = 30;//移动距离  
  111.            var t = 0;//声明一个参量  
  112.            clearInterval(times);//开始前先清除上次的定时器  
  113.            times = setInterval(function(){  
  114.                t++;  
  115.                if(t>=px){//判断一张轮播是否结束  
  116.                 clearInterval(times);//一张结束清除定时器  
  117.                 Crun = true;//一张结束点击时间可用  
  118.                }  
  119.                imgs.style.left = runD/px*t+start+'px';//运动left值  
  120.                if(index>=point.length&&t>=px){//判断是否到最后一张  
  121.                   imgs.style.left = 0;//最后一张与第一张是一样的,立刻切换到第一张去,不会影响效果  
  122.                   index = 0;//下标变为第一张  
  123.                }  
  124.                pointIn();//白点跟随图片改变  
  125.                if(index>=point.length){//到最后一张时,对应上第一个白点  
  126.                   point[0].className = 'on';  
  127.                }else{  
  128.                   point[index].className = 'on';  
  129.                }  
  130.            },20);  
  131.         }  
  132.         function pointIn(){  
  133.             for(var i = 0;i<point.length;i++){  
  134.                 point[i].className = '';//清除所有点的样式  
  135.             }  
  136.         }  
  137.         // for(var i = 0;i<point.length;i++){//遍历所有点  
  138.         //  point[i].idx = i;//存起下标  
  139.         //  point[i].onclick = function(){  
  140.         //      index = this.idx;//点击时获取点击到的下标  
  141.         //      run();  
  142.         //  }  
  143.         // }  
  144.         for(var i = 0;i<point.length;i++){//遍历所有点  
  145.             (function(idx){  //将i当参数传入  
  146.                 point[idx].onclick = function(){  
  147.                     index = idx;//点击时获取点击到的下标  
  148.                     run();  
  149.                 }  
  150.             })(i);  
  151.         }  
  152.         time = setInterval(function(){//定时器  
  153.             index++;  
  154.             run();  
  155.         },1000);  
  156.         win.onmouseover = function(){//鼠标移入  
  157.             clearInterval(time)  
  158.         }  
  159.         win.onmouseout = function(){//鼠标离开  
  160.             time = setInterval(function(){  
  161.                 index++;  
  162.                 run();  
  163.             },1000);  
  164.         }  
  165.         left.onclick = function(){//左移动  
  166.             if(Crun){  
  167.                 index++;  
  168.                 run();  
  169.             }  
  170.             Crun = false;//一张未切换完,不会切换下一张  
  171.         }  
  172.         right.onclick = function(){//右移动  
  173.             if(Crun){  
  174.                 if(index==0){//如果是第一张  
  175.                 index = point.length; //下标切换为最后一张  
  176.                 imgs.style.left = index*Wnum*(-1)+'px';//left值切换到最后一张  
  177.             }  
  178.             index--;  
  179.             run();  
  180.             }  
  181.             Crun = false;//一张未切换完,不会切换下一张  
  182.         }  
  183.     </script>  
  184. </body>  
  185. </html>  
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值