主页 / 网络编程 /

原生js实现点击轮播切换图片

网络编程 2021-07-04 15:02www.168986.cn编程入门
这篇文章主要为大家详细介绍了原生js点击轮播切换图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

<!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;
      : 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" style="left:-600px;">
      <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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。

上一篇：基于Angular 8和Bootstrap 4实现动态主题切换的示例代 下一篇：node.js中process进程的概念和child_process子进程模块

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by