本文共 1835 字，大约阅读时间需要 6 分钟。

本文教你如何使用JavaScript完成图片的轮播，说是图片的轮播，其实就是图片的滚动而已，也没什么高深莫测的实质性的东西。要实现这个效果，须理解BOM(浏览器对象模型)中的Window对象的定时的操作：

• 设置定时的方法
  
• 清除定时的方法
  

现在我来写一个小的Demo来稍微讲一下Window对象设置定时的方法。例如有如下一个【Window对象的定时操作.html】页面：

在Firefox浏览器上运行该页面，则每隔5秒就会弹出一个对话框。再将该页面改成：

在Firefox浏览器上运行该页面，则隔5秒钟弹出一个对话框之后就运行完毕了。下面我为大家提供一个【使用JS实现图片滚动效果.html】页面，内容如下：

			
   								
   		
   
			
    			
    
				
     
					
      				
     
				
     
					
      				
     
				
     
					
      登录					
      注册					
      购物车				
     
				
     
							
    
				
    			
    
				
     首页  				
     电脑办公  				
     手机数码  				
     烟酒糖茶  			
    
				
    			
    
				
     			
    
				
    			
    
				
     				
     
					
      热门商品
      				
     
				
     				
     
					
      
						
       					
      
										
      
						
       
							
        
 
          
        
							
        
 
          
        
							
        
 
          
        
							
        
 
          
        
						
       
						
       
							
        
 
          
        
							
        
 
          
        
							
        
 
          
        
							
        
 
          
        
							
        
 
          
        
							
        
 
          
        
						
       
					
      
				
     
			
    
				
    			
    
				 
     			
    
				
    			
    
				
     				
     
					
      最新商品
      				
     
				
     				
     
					
      
						
       					
      
										
      
						
       
							
        
 
          
        
							
        
 
          
        
							
        
 
          
        
							
        
 
          
        
						
       
						
       
							
        
 
          
        
							
        
 
          
        
							
        
 
          
        
							
        
 
          
        
							
        
 
          
        
							
        
 
          
        
						
       
					
      
				
     
			
    
				
    			
    
				
     			
    
				
    			
    
				
     
      					关于我们 联系我们 招贤纳士 法律声明 友情链接 支付方式 配送方式 服务声明 广告声明 
      
					Copyright © 2005-2016 传智商城 版权所有 				
     			
    
			
   
	

找到图片滚动的div元素：

给大家看一眼，接下来主要就是围绕该div元素按照如下步骤进行讲解：

1. 当页面加载的时候开始计时，并使用onload事件；
2. 编写onload事件触发的函数；
3. 获得操作图片的控制权；
4. 修改图片的src的属性。

如此一来，完成图片轮播的效果的JavaScript代码为：

如要查看完整代码，可参考!

转载地址：https://liayun.blog.csdn.net/article/details/70880760 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！