BOM简单练习题（轮播图）

男娘i 2021-11-23 05:10 185阅读 0赞

1![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU5OTM3Nw_size_16_color_FFFFFF_t_70]  
做一个如上图的图片播放器

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			img{
    				display: none;
    			}
    			.show{
    				display: block;
    			}
    		</style>
    	</head>
    	<body>
    		<table align="center" border="1" bordercolor="orange" width="500">
    			<tr>
    				<td colspan="6" align="center" >
    					js图片播放器
    				</td>
    			</tr>
    			<tr>
    				<td colspan="6" align="center">
    					<img class="show" src="img/Chrysanthemum.jpg" width="300" height="300"/>
    					<img src="img/Desert.jpg" width="300" height="300"/>
    					<img src="img/Hydrangeas.jpg" width="300" height="300"/>
    					<img src="img/Jellyfish.jpg" width="300" height="300"/>
    					<img src="img/Koala.jpg" width="300" height="300"/>
    					<img src="img/Lighthouse.jpg" width="300" height="300"/>
    					<img src="img/Penguins.jpg" width="300" height="300"/>
    				 
    				</td>
    			</tr>
    			<tr>
    				<td>
    					<input type="button" value="自动播放" id="btn1">
    				</td>
    				<td>
    					<input type="button" value="停止播放" id="btn2">
    					
    				</td>
    				<td>
    					<input type="button" value="上一张" id="btn3">
    				</td>
    				<td>
    					<input type="button" value="下一张" id="btn4">
    				</td>
    				<td>
    					<input type="button" value="第一张" id="btn5">
    				</td>
    				<td>
    					<input type="button" value="最后一张" id="btn6">
    				</td>
    			</tr>
    		</table>
    	</body>
    	<script type="text/javascript">
    		//自动播放
    		var btn= document.getElementById("btn1");
    		var index = 0;
    		var obj=null;
    		
    		index++;
    		btn.onclick=function(){
    			if(obj==null){
    		 		obj=window.setInterval(autoPlay,1500);
    		 	}
    		};
    		
    		function autoPlay(){
    		 
    				var imgs= document.getElementsByTagName("img");
    				for(var i=0;i<imgs.length;i++){
    					imgs[i].className="";
    				}
    				imgs[index].className="show";
    				if(index==imgs.length-1){
    					index=0;
    				}
    				else{
    					index++;
    				}
    		}
    		
    		//停止播放
    		var stopbtn=document.getElementById("btn2");
    		stopbtn.onclick=function(){
    			//清除定时器
    			window.clearInterval(obj);
    			obj=null;
    			
    		};
    		
    		
    		//第一张：
    		var firsbtn= document.getElementById("btn5");
    		firsbtn.onclick=function(){
    			//清除定时器
    			window.clearInterval(obj);
    			obj=null;
    			
    			var imgs= document.getElementsByTagName("img");
    			for(var i=0;i<imgs.length;i++){
    				imgs[i].className="";
    			}
    			imgs[0].className="show";
    			index=0;
    			
    			obj=window.setInterval(autoPlay,1500);
    		}
    		//最后一张
    		var last = document.getElementById("btn6");
    		last.onclick=function(){
    			var imgs= document.getElementsByTagName("img");
    			for(var i=0;i<imgs.length;i++){
    				imgs[i].className="";
    			}
    			imgs[imgs.length-1].className="show";
    			index=imgs.length-1;
    		}
    		
    		//下一张
    		var next=document.getElementById("btn4");
    		next.onclick=function(){
    			//清除定时器
    			window.clearInterval(obj);
    			obj=null;
    			var imgs= document.getElementsByTagName("img");
    			for(var i=0;i<imgs.length;i++){
    				imgs[i].className="";
    			}
    			if(index==imgs.length-1){
    				index=0;
    			}
    			else{
    				index++;
    			}
    			imgs[index].className="show";
    			obj=window.setInterval(autoPlay,1500);
    		}
    		//上一张
    		var prev= document.getElementById("btn3");
    		prev.onclick=function(){
    			//清除定时器
    			window.clearInterval(obj);
    			obj=null;
    			
    			var imgs= document.getElementsByTagName("img");
    			for(var i=0;i<imgs.length;i++){
    				imgs[i].className="";
    			}
    			if(index==0){
    				index=imgs.length-1;
    			}
    			else{
    				index--;
    			}
    			imgs[index].className="show";
    			obj=window.setInterval(autoPlay,1500);
    		}
    		
    		
    	</script>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU5OTM3Nw_size_16_color_FFFFFF_t_70]: /images/20211122/f559db6076af4cc4a1f3c239465c3b56.png