原生js实现点击轮播切换图片-创新互联

本文实例为大家分享了js实现点击轮播切换图片的具体代码，供大家参考，具体内容如下

10年积累的网站设计、做网站经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有达坂城免费网站建设让你可以放心的选择与我们合作。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>点击轮播图</title>
</head>
<style>
    .container {
      position: relative;
      width: 600px;
      height: 400px;
      margin:100px auto 0 auto;
      box-shadow: 0 0 5px green;
      overflow: hidden;
    } 
    .wrap {
      position: absolute;
      width: 4200px;
      height: 400px;
      z-index: 1;
    }
    .container .wrap img {
      float: left;
      width: 600px;
      height: 400px;
    }
     .container .buttons {
      position: absolute;
      right: 40%;
      bottom:20px;     
      z-index: 2;
    }  
    .container .buttons span {
      margin-left: 10px;
      display: inline-block;
      width: 7px;
      height: 7px;     
      background-color: #D4D4D4;
      text-align: center;
      color:white;
      cursor: pointer;      
    }
    .container .buttons span.on{
      background-color: #558949;
    }
    .container .arrow {
      position: absolute;
      top: 35%;
      color: green;
      padding:0px 14px;
      border-radius: 50%;
      font-size: 50px;
      z-index: 2;
      display: none;
    }
</style>
<body>
  <div class="container">
    <div class="wrap" >
      <img 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="">    
    </div>
    <div class="buttons">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>  
  </div>
  
  <script>
   var wrap = document.querySelector(".wrap");     
    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";
    }
    index++;
      if(index > 4){
        index = 0;
      }
    index--;
    if(index < 0){
      index = 4;
    }
    showCurrentDot();
     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>

网站名称：原生js实现点击轮播切换图片-创新互联
网页网址：https://www.cdcxhl.com/article22/dgopcc.html

成都网站建设公司_创新互联，为您提供自适应网站、网站排名、Google、网站建设、外贸建站、网页设计公司

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容