原生js轮播图自动切换

柔情只为你懂 2022-05-27 06:51 174阅读 0赞

![20180413142941554][]

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>轮播图</title>
      <style>
        * {
          margin:0;
          padding:0;
        }
        a{
          text-decoration: none;
        }
        .container {
          position: relative;
          width: 600px;
          height: 400px;
          margin:100px auto 0 auto;
          box-shadow: 0 0 5px #FF3366;
          overflow: hidden;
        }
        .container .wrap {
          position: absolute;
          width: 4200px;
          height: 400px;
          z-index: 1;
        }
        .container .wrap img {
          float: left;
          width: 600px;
          height: 400px;
        }
        .container .buttons {
          position: absolute;
          right: 5px;
          bottom:40px;
          width: 150px;
          height: 10px;
          z-index: 2;
        }
        .container .buttons span {
          margin-left: 5px;
          display: inline-block;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background-color: #D4D4D4;
          text-align: center;
          color:white;
          cursor: pointer;
        }
        .container .buttons span.on{
          background-color: #FF3366;
        }
        .container .arrow {
          position: absolute;
          top: 35%;
          color: #808080;
          padding:0px 14px;
          border-radius: 50%;
          font-size: 50px;
          z-index: 2;
          display: none;
        }
        .container .arrow_left {
          left: 10px;
        }
        .container .arrow_right {
          right: 10px;
        }
        .container:hover .arrow {
          display: block;
        }
        .container .arrow:hover {
          background-color: rgba(0,0,0,0.2);
        }
      </style>
    </head>
    <body>
      <div class="container">
        <div class="wrap" style="left: -600px;">     
          <img src="./img/jd_app7.png" alt="">
          <img src="./img/jd_app3.png" alt="">
          <img src="./img/jd_app4.png" alt="">
          <img src="./img/jd_app5.png" alt="">
          <img src="./img/jd_app6.png" alt="">
          <img src="./img/jd_app7.png" alt="">
          <img src="./img/jd_app3.png" alt="">
        </div>
        <div class="buttons">
          <span class="on">1</span>
          <span>2</span>
          <span>3</span>
          <span>4</span>
          <span>5</span>
        </div>
        <a href="javascript:;" class="arrow arrow_left"><</a>
        <a href="javascript:;" class="arrow arrow_right">></a>
      </div>
      <script>
        var wrap = document.querySelector(".wrap");
        //左右箭头切换
        var next = document.querySelector(".arrow_right");
        var prev = document.querySelector(".arrow_left");
        next.onclick = function () {
          next_pic();
        }
        prev.onclick = function () {
          prev_pic();
        }
        function next_pic () {
          index++;
          if(index > 4){
            index = 0;
          }
          showCurrentDot();
          var newLeft;
          if(wrap.style.left === "-3600px"){
            newLeft = -1200;
          }else{
            newLeft = parseInt(wrap.style.left)-600;
          }
          wrap.style.left = newLeft + "px";
        }
        function prev_pic () {
          index--;
          if(index < 0){
            index = 4;
          }
          showCurrentDot();
          var newLeft;
          if(wrap.style.left === "0px"){
            newLeft = -2400;
          }else{
            newLeft = parseInt(wrap.style.left)+600;
          }
          wrap.style.left = newLeft + "px";
        }
        //自动轮播
        var timer = null;
        function autoPlay () {
          timer = setInterval(function () {
            next_pic();
          },2000);
        }
        autoPlay();
     
        var container = document.querySelector(".container");
        container.onmouseenter = function () {
          clearInterval(timer);
        }
        container.onmouseleave = function () {
          autoPlay();  
        }
     	//轮播图下方的小圆点点击切换图片
        var index = 0;
        var dots = document.getElementsByTagName("span");
        function showCurrentDot () {
          for(var i = 0, len = dots.length; i < len; i++){
            dots[i].className = "";
          }
          dots[index].className = "on";
        }
     
        for (var i = 0, len = dots.length; i < len; i++){
          (function(i){
            dots[i].onclick = function () {
              var dis = index - i;
              if(index == 4 && parseInt(wrap.style.left)!==-3000){
                dis = dis - 5;   
              }
              //和使用prev和next相同，在最开始的照片5和最终的照片1在使用时会出现问题，导致符号和位数的出错，做相应地处理即可
              if(index == 0 && parseInt(wrap.style.left)!== -600){
                dis = 5 + dis;
              }
              wrap.style.left = (parseInt(wrap.style.left) + dis * 600)+"px";
              index = i;
              showCurrentDot();
            }
          })(i);      
        }
      </script>
    </body>
    </html>

[20180413142941554]: /images/20220527/70276f7327d44481b70b070fa1edf538.png