Js图片点击切换轮播实现代码

图片点击切换

   
    
    
    
    
      *{
 padding: 0;
 margin:0;
      }
      .outer{
 width:640px;
 height:453px;
 margin:100px auto;
 
 text-align: center;
      }
      
    
  
  
    
      

      
      上一张
      下一张

    
  

实现效果

轮播

  
    
    
    
      *{
 padding:0px;
 margin: 0px;
      }
      
      #outer{
 position: relative;
 width:660px;
 height:425px;
 margin:50px auto ;
 background:yellow;
 padding:10px 0;
 overflow: hidden;
      }
      #imglist{
 position: absolute;
 list-style: none;
 
 left:0px;

      }
      #imglist li{
 margin: 0 10px;
 float:left;
      }
      
      #navDiv{
 position: absolute;
 bottom: 15px;
 
 left:0;
 
      }
      #navDiv a{
 float:left;
 width:20px;
 height:20px;
 background:#ff1;
 opacity: 0.5;
 
 filter:alpha(opacity=50);
 margin: 0 5px;
      }
      #navDiv a:hover{
 background:red;
      }