JavaScript轮播

图片轮播

		<img id="loop" src="img/0.jpg" />
		<input type="button" value="1" onclick="set(0)"/>
		<input type="button" value="2" onclick="set(1)" />
		<input type="button" value="3" onclick="set(2)" />
		<script>
			var i = 1;
			function loop(){
				if(i==3){
					i=0;
				}
				document.getElementById("loop").src='./img/'+i+'.jpg';
				i++;
			}
			
			var id = setInterval("loop()",1500);
			
			function set(i){
				document.getElementById("loop").src='./img/'+i+'.jpg';
				clearInterval(id);
			}
			
		</script>
		

样式改进：按钮变色

		<img id="loop" src="img/0.jpg" />
		<input type="button" value="1" class="loop_button" onclick="set(this,0)"/>
		<input type="button" value="2" class="loop_button" onclick="set(this,1)" />
		<input type="button" value="3" class="loop_button" onclick="set(this,2)" />
		<script>
			var i = 1;
			function loop(){
				if(i==3){
					i=0;
				}
				document.getElementById("loop").src='./img/'+i+'.jpg';
				i++;
			}
			
			var id = setInterval("loop()",1500);
			
			function set(i){
				document.getElementById("loop").src='./img/'+i+'.jpg';
				clearInterval(id);
			}
			
			function set(obj,i){
				obj.style.backgroundColor="red";
				var elements = document.getElementsByClassName("loop_button");
				for(var k = 0;k<elements.length;k++){
					if(elements[k].value != obj.value){
						elements[k].style.backgroundColor="black";
					}
				}
				document.getElementById("loop").src='./img/'+i+'.jpg';
				clearInterval(id);
				
				
			}
			
		</script>