js实现轮播图简单代码

http部分

  

   

    

     

    
    

     
		
      <div class="imglist">
     
    
   

    

     

    
    

     
			
      <div class="image" id="image">
     
    
   

    

     

    
    

     
				
      <ul>
     
    
   

    

     

    
    

     
					
      <li class="current">
      <img src="img/s1.jpg" alt="" />
      </li>
     
    
   

    

     

    
    

     
					
      <li>
      <img src="img/s2.jpg" alt="" />
      </li>
     
    
   

    

     

    
    

     
					
      <li>
      <img src="img/s3.jpg" alt="" />
      </li>
     
    
   

    

     

    
    

     
					
      <li>
      <img src="img/s4.jpg" alt="" />
      </li>
     
    
   

    

     

    
    

     
					
      <li>
      <img src="img/s5.jpg" alt="" />
      </li>
     
    
   

    

     

    
    

     
					
      <li>
      <img src="img/s6.jpg" alt="" />
      </li>
     
    
   

    

     

    
    

     
					
      <li>
      <img src="img/s7.jpg" alt="" />
      </li>
     
    
   

    

     

    
    

     
					
      <li>
      <img src="img/s8.jpg" alt="" />
      </li>
     
    
   

    

     

    
    

     
				
      </ul>
     
    
   

    

     

    
    

     
			
      </div>
     
    
   

    

     

    
    

     
			
      <div class="cir" id="cir">
     
    
   

    

     

    
    

     
				
      <ul>
     
    
   

    

     

    
    

     
					
      <li class="current">
      </li>
     
    
   

    

     

    
    

     
					
      <li>
      </li>
     
    
   

    

     

    
    

     
					
      <li>
      </li>
     
    
   

    

     

    
    

     
					
      <li>
      </li>
     
    
   

    

     

    
    

     
					
      <li>
      </li>
     
    
   

    

     

    
    

     
					
      <li>
      </li>
     
    
   

    

     

    
    

     
					
      <li>
      </li>
     
    
   

    

     

    
    

     
					
      <li>
      </li>
     
    
   

    

     

    
    

     
				
      </ul>
     
    
   

    

     

    
    

     
			
      </div>
     
    
   

    

     

    
    

     
			
      <div class="btn">
     
    
   

    

     

    
    

     
				
      <span class="left" id="left" >
      <img src="img/slide-btnL.png" />
      </span>
     
    
   

    

     

    
    

     
				
      <span class="right" id="right">	
      <img src="img/slide-btnR.png" />
      </span>
     
    
   

    

     

    
    

     
			
      </div>
     
    
   

    

     

    
    

     
		
      </div>
     
    
  

js代码

  

   

    

     

    
    

     

      window.onload = 
      function() {
     
    
   

    

     

    
    

     
	
      var leftbtn = 
      document.getElementById(
      "left");
     
    
   

    

     

    
    

     
	
      var rightbtn = 
      document.getElementById(
      "right");
     
    
   

    

     

    
    

     
	
      var imagelist = 
      document.getElementById(
      "image").getElementsByTagName(
      "li");
     
    
   

    

     

    
    

     
	
      var cirlist = 
      document.getElementById(
      "cir").getElementsByTagName(
      "li");
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
	
      var index = 
      0;
     
    
   

    

     

    
    

     
	
     
    
   

    

     

    
    

     

      	leftbtn.onclick = 
      function() {
     
    
   

    

     

    
    

     
		
      if(--index < 
      0)
     
    
   

    

     

    
    

     

      			index = imagelist.length - 
      1;
     
    
   

    

     

    
    

     

      		changimg();
     
    
   

    

     

    
    

     

      	}
     
    
   

    

     

    
    

     
	
     
    
   

    

     

    
    

     

      	rightbtn.onclick = 
      function() {
     
    
   

    

     

    
    

     
		
      if(++index == imagelist.length)
     
    
   

    

     

    
    

     

      			index = 
      0;
     
    
   

    

     

    
    

     

      		changimg();
     
    
   

    

     

    
    

     

      	}
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
	
      var timer = setInterval(
      function() {
     
    
   

    

     

    
    

     
		
      if(++index == imagelist.length)
     
    
   

    

     

    
    

     

      			index = 
      0;
     
    
   

    

     

    
    

     

      		changimg();
     
    
   

    

     

    
    

     

      	}, 
      2000);
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
	
      function changimg() {
     
    
   

    

     

    
    

     
		
      for(
      var i = 
      0; i < imagelist.length; i++) {
     
    
   

    

     

    
    

     

      			imagelist[i].className = 
      "";
     
    
   

    

     

    
    

     

      		}
     
    
   

    

     

    
    

     
		
      for(
      var j = 
      0; j < cirlist.length; j++) {
     
    
   

    

     

    
    

     

      			cirlist[j].className = 
      "";
     
    
   

    

     

    
    

     

      		}
     
    
   

    

     

    
    

     

      		imagelist[index].className = 
      "current";
     
    
   

    

     

    
    

     

      		cirlist[index].className = 
      "current";
     
    
   

    

     

    
    

     

      	}
     
    
   

    

     

    
    

     

      }
     
    
  

附上完整代码文件的超链接：https://download.csdn.net/download/ysgz9749/12466678（可以运行）