javascript实现图片轮播效果

本文实例介绍了javascript实现图片轮播效果的详细代码，分享给大家供大家参考，具体内容如下

效果图：

具体代码：

  
  
  
  *{
    margin: 0;
    padding: 0;
  }
   .wrap{
     width: 510px;
     margin: 0 auto;
     overflow: hidden;
      position: relative;
   }
   .caktye{
     width: 9999px;
     overflow: hidden;
     position: relative;
     left: 0;
   }
   .main{
     text-align: center;
      position: absolute;
      bottom: 10px;
      
      left: 35%;

   }
   .main button{
     width: 25px;
      height: 25px;
      text-align: center;
      line-height: 25px;
      border-radius: 25px;
      display: inline-block;
      border: none;
   }
   .active{
     background-color: yellow;
   }
   .caktye a{
     float: left;
   }
   .caktye img {
      display: block;
      width:510px;
    }
   #prevBtn{
 display: block;
 position: absolute;
 left: 5px;
 bottom: 45%;
      width: 15px;
      height: 15px;
      
      border-left: 5px solid ;
      border-top: 5px solid ;
border-color: rgba(255,255,255,0.5);
      -webkit-transform: rotate(45deg);
      transform: rotate(-45deg);
   }
   #nextBtn{
      display: block;
      position: absolute;
      right: 5px;
      bottom: 45%;
      width: 15px;
      height: 15px;
      
      border-right: 5px solid;
      border-top: 5px solid;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      border-color: rgba(255,255,255,0.5);
      
   }

  


 
  
   
    
    
    
    
    
      
   
    
      1
      2
      3
      4
      5
   
   
      
      

   
     
  

希望本文所述对大家学习javascript程序设计有所帮助。