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

最新推荐文章于 2024-05-28 19:26:08 发布

庙里有只喵

最新推荐文章于 2024-05-28 19:26:08 发布

阅读量2.3k

点赞数 2

文章标签： html html5 css3

本文链接：https://blog.csdn.net/qq_43520814/article/details/104715333

版权

在这里插入<!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>
代码片

庙里有只喵

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS实现简单的点击轮播图

在这里插入<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { padding: 0px; margin: 0px; } .nav { width: ...
复制链接

扫一扫