原生JS实现简易图片自动轮播效果

谁践踏了优雅 2023-02-26 12:21 155阅读 0赞

直接上代码

<!doctype html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>自动播放选项卡</title>
    		<style>
    			*{ 
    				margin:0;
    				padding:0;
    			}
    			
    			.box{ 
    				width:600px;
    				height:400px;
    				border:1px solid red;
    				margin:100px auto;
    				position:relative;
    			}
    			
    			a{ 
    				font-size:40px;
    				position:absolute;
    				text-decoration:none;
    				top:-10px;
    			}
    			#prev{ 
    				
    				left:0;
    			}
    			#next{ 
    				
    				right:0;
    				
    			}
    			#pos{ 
    				margin-left:30px;
    			}
    			input{ 
    				width:90px;
    				height:40px;
    				float:left;
    				outline:none;
    				border:0;
    			}
    			.box div{ 
    				width:600px;
    				height:400px;
    				background:skyblue;
    				text-align:center;
    				line-height:300px;
    				font-size:100px;
    				font-weight:bold;
    				text-shadow:5px 5px 5px #f90;
    				display:none;
    			}
    			
    			.box .show{ 
    				display:block;
    			}
    			.box .active{ 
    				width:88px;
    				color:#fff;
    				font-size:18px;
    				font-weight:bold;
    				background:#f90;
    			}
    		</style>
    		<script>
    			window.onload = function()
    			{ 
    				var oBox = document.getElementById('box');
    				var oPrev = document.getElementById('prev');
    				var oNext = document.getElementById('next');
    				var aBtn = document.getElementsByTagName('input');
    				var aDiv = oBox.getElementsByTagName('div');
    				var oNow = 0;
    				
    				for (var i=0;i<aBtn.length;i++) { 
    					aBtn[i].dataIndex = i;
    					
    					aBtn[i].onclick = function(){ 
    					
    						oNow = this.dataIndex;
    						
    						for (var i=0;i<aBtn.length;i++) { 
    							aBtn[i].className = '';
    							aDiv[i].className = '';
    						}
    						this.className = 'active';
    						aDiv[this.dataIndex].className = 'show';
    					}
    				}
    				
    				oPrev.onclick = prev;
    				oNext.onclick = next;
    				
    				//实现自动播放
    				var timer = setInterval(next , 1000);
    				
    				oBox.onmouseover = function()
    				{ 
    					clearInterval(timer);
    				}
    				
    				oBox.onmouseout = function()
    				{ 
    					timer = setInterval(next , 1000);
    				}
    				
    				
    				function prev()
    				{ 
    					oNow--;
    					if (oNow < 0) { 
    						oNow = aBtn.length-1;
    					}
    					tab();
    				}
    				
    				function next()
    				{ 
    					oNow++;
    					if (oNow > aBtn.length-1) { 
    						oNow = 0;
    					}
    					
    					tab();
    					
    				}
    				
    				function tab()
    				{ 
    					for (var i=0;i<aBtn.length;i++) { 
    						aBtn[i].className = '';
    						aDiv[i].className = '';
    					}
    					aBtn[oNow].className = 'active';
    					aDiv[oNow].className = 'show';
    				}
    				
    				
    			}
    		</script>
    	</head>
    	
    	<body>
    		<div class="box" id="box">
    			<a href="javascript:;" id="prev">☜</a>
    			<a href="javascript:;" id="next">☞</a>
    			<input type="button" name="" value="亚洲" class="active" id="pos"/>
    			<input type="button" name="" value="欧洲" />
    			<input type="button" name="" value="非洲" />
    			<input type="button" name="" value="北美洲" />
    			<input type="button" name="" value="南美洲" />
    			<input type="button" name="" value="大洋洲" />
    			<div class="show">亚洲</div>
    			<div>欧洲</div>
    			<div>非洲</div>
    			<div>北美洲</div>
    			<div>南美洲</div>
    			<div>大洋洲</div>
    		</div>
    	</body>
    </html>

展示效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70]: /images/20230209/1daf6355da1340bbb95f00265546f1d0.png