图片轮播

图片轮播效果：

具体功能：图片自动循环轮播，鼠标放到图片上停止轮播，鼠标移开继续轮播

代码案例 

已经上传到博客资源里，可以下载测试。

或者复制代码，再当前目录下新建mages目录放几张对应文件名的图片也可以。

	
    
    
	
	
    
    
	
    
    
	 rel="stylesheet" type="text/css" href="" />
	
	<script type="text/javascript">
		//图片切换：
		//要求：
		//1，网页一打开，图片每隔1秒自动切换
		//2，鼠标放到图片上，图片会停止切换，离开就继续切换
		//3，鼠标放到右边的“按钮”上，直接切换为对应图，。离开之后继续换图
		//4，图片切换的过程中，右边的按钮背景色同时变换
		window.onload = init;
		var t1 ;
		function init(){
			document.getElementById("scroll_number_1").style.background = "orange";
			zou();
		}
		var n = 1;
		function bian(){
			//先更换图
			var obj = document.getElementById("dd_scroll");
			n++;
			if(n > 6 ){
				n = 1;
			}
			obj.src = "images/dd_scroll_" + n + ".jpg";

			//再变换按钮背景色
			//去掉其他按钮的背景
			for(var tmp = 1; tmp <= 6; tmp++){
				document.getElementById("scroll_number_" + tmp).style.background = "";
			}
			//	document.getElementById("scroll_number_2").style.background = "";
			//	document.getElementById("scroll_number_3").style.background = "";
			//	document.getElementById("scroll_number_4").style.background = "";
			//	document.getElementById("scroll_number_5").style.background = "";
			//	document.getElementById("scroll_number_6").style.background = "";

			//将当前按钮背景改为特殊颜色
			document.getElementById("scroll_number_" + n ).style.background = "orange";
		}
		function ting(){
			window.clearInterval( t1 );
		}
		function zou(){
			 t1 = window.setInterval("bian();", 1000);
		}
		//作用：鼠标放到某个按钮上，将图片切换到对应的那张图并“定住”
		function ding( i ){
			n = i-1;
			bian();
			ting();
		}
	</script>


	
    
    

		
     
     
		
     
     

			
      
      
1
2
3
4
5
6
		
     
     
	
    
    

总结：

1.上面案例关键点使用一个全局变量来控制自动轮播，那么代码 和函数之间关联性大，所以逻辑理解起来比较复杂。

2.还有一个方法：之前写出来，找不到放在哪里了。所以只说思路，以后再补回来，有兴趣可以试试，写出来记得留言。

每次轮播在定时器里读出当前显示的图片，然后再轮播到下一张图片。这种方法符合人的逻辑，