HTML + CSS + JS 轮番图

别喝我的旺仔牛奶

于 2022-11-13 11:23:58 发布

阅读量259

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/m0_63502124/article/details/127829989

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			ul,
			ol,
			li {
				list-style-type: none;
			}

			img {
				width: 100%;
				height: 100%;
				display: block;
			}

			.banner {
				width: 100%;
				height: 500px;
				position: relative;
				margin: 50px 0;
			}

			.banner>ul {
				width: 100%;
				height: 100%;
				position: relative;
			}

			.banner>ul>li {
				width: 100%;
				height: 100%;
				position: absolute;
				/* 绝对定位  使他们叠在一起 */
				left: 0;
				top: 0;

				opacity: 0;
				/* 设置所有的透明度为0  并设置第一张为1 */
				/* 设置动画效果 */
				transition: opacity .5s linear;
			}

			.banner>ul>li.active {
				opacity: 1;
			}

			/* 设置焦点 */
			.banner>ol {
				width: 200px;
				height: 30px;
				position: absolute;
				left: 30px;
				bottom: 30px;
				background-color: rgb