HTML+CSS实现简单的点击轮播图

朴灿烈づ我的快乐病毒、 2023-07-12 05:28 36阅读 0赞

在这里插入<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> * { 
    				padding: 0px;
    				margin: 0px;
    			}
    
    			.nav { 
    				width: 100px;
    				height: 100px;
    				margin: 100px auto 0px;
    			}
    
    			ul { 
    				width: 200px;
    				height: 100px;
    				list-style-type: none;
    			}
    
    			ul li { 
    				width: 100px;
    				height: 100px;
    				float: left;
    				//为了将每张li里的图片放到第一张的位置
    				position: absolute;
    
    			}
    
    			ul li img { 
    				width: 100px;
    				height: 100px;
    			}
    
    			#btn { }
    		</style>
    		
    	</head>
    	<body>
    		<div class="nav">
    			<ul>
    				<li><img src="cupon4.png" /></li>
    				<li><img src="cupon5.png" /></li>
    			</ul>
    		</div>
    		<div align="center">
    			<button id="btn" οnclick="next()">下一张</button>
    		</div>
    		
    		<script>
    			var flag = 0;
    			var lis = document.getElementsByTagName("li");
    			lis[0].style.opacity = "1";
    			lis[1].style.opacity = "0"; function next () { 
    				/* window.alert("测试代码块！！"); */
    				/* 1.通过document对象 获取标签对象 */
    
    				//lis 一组li { 第1张，第2张}   默认 // 0 1 if (flag === 0) { 
    					var n = 0; while (n < lis.length) { 
    						if (n === 1) { 
    							lis[n].style.opacity = "1";
    						} else { 
    							lis[n].style.opacity = "0";
    						}
    
    						n++;
    					}
    					flag = 1;
    				} else { 
    					var n = 0; while (n < lis.length) { 
    						if (n === 0) { 
    							lis[n].style.opacity = "1";
    						} else { 
    							lis[n].style.opacity = "0";
    						}
    						n++;
    					}
    					flag = 0;
    				}
    
    
    
    
    			}
    		</script>
    	</body>
    </html>
    代码片