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

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

  
  


    .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;
    }


  
    
      
      
      
      
      
   
    
    
      
      
      
      
      
      
  
  
  

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