pc端-轮播图

最新推荐文章于 2024-04-03 08:05:57 发布

<李小狮 / >

最新推荐文章于 2024-04-03 08:05:57 发布

阅读量355

点赞数

分类专栏： JS 功能实例文章标签： javascript

本文链接：https://blog.csdn.net/AN_MEI/article/details/104890718

版权

本篇目录

- - 轮播图

轮播图

	<!DOCTYPE html>
	<html>
	<head lang="en">
	    <meta charset="UTF-8">
	    <title></title>
		<style>
			*{
   
				margin: 0;
				padding: 0;
			}
			ul{
   
				list-style: none;
			}
			body{
   
				font-family: "微软雅黑";
				color: #14191e;
			}
			.main{
   
				position: relative;
				width: 1200px;
				height: 460px;
				margin: 30px auto;
				overflow: hidden;
			}
			.banner{
   
				position: relative;
				width: 1200px;
				height: 460px;
				overflow: hidden;
			}
			.banner-slide{
   
				display: none;
				position: absolute;
				width: 1200px;
				height: 460px;
				background-repeat: no-repeat;
			}
			.slide1{
   
				background-image:url("./img/bg1.jpg");
			}
			.slide2{
   
				background-image:url("./img/bg2.jpg");
			}
			.slide3{
   
				background-image:url("./img/bg3.jpg");
			}
			.slide-active{
   
				display: block;
			}
			.button{
   
				position: absolute;
				top: 50%;
				left: 244px;
				margin-top: -40px;
				width: 40px;
				height: 80px;
				backgroun