HBuilder-简易banner制作

妮可珍郝坎

已于 2023-03-03 08:50:53 修改

阅读量423

点赞数

文章标签： css css3 html

于 2023-03-02 12:36:53 首次发布

本文链接：https://blog.csdn.net/nikezhenhaokan/article/details/129298518

版权

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding :0;
			}
			.show{
				width: 400px;
				overflow: hidden;
				position: relative;
			}
			.boxs{
				display: flex;
				width: 1600px;
				margin-left:0px;	
				}
			.box{
				width: 400px;
				position: relative;
			}
			.box>img{
				width:100%;
			}
			.box>p{
				width: 100%;
				position:absolute;
				line-height: 20px;
				background: rgba(0,0,0,0.5);
				bottom:5px;
				color:#fff;
				z-index: 2;
			}
			.con{
				position: absolute;
				width: 100%;
				z-index: 3;
				height: 100%;
			}
			.con>div{
				width: 50px;
				height:50px;
				background:rgba(0,0,0,0.5);
				color: #fff;
				font-size: :36px;
				line-height: 50px;
				text-align: center;
				position: absolute;
				top: 50%;
				margin-top: -25px;
				cursor: pointer;
			}
			.con>div:hover{
				background: #000;
			}
			.right{
				right: 0;
			}
			.balls{
				display: flex;
				position: absolute;
				z-index: 10;
				bottom:10px;
				right:10px;
			}
			.ball{
				width: 10px;
				height: 10px;
				background: rgba(255,255,255,0.5);
				border-radius: 5px;
				margin:5px;
				cursor: pointer;
			}
			.ball:hover{
				background: white;
			}
		</style>
		<script src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript">
		$(function(){
			x=0
			$(".right").click(function(){
				x=x-400;
				if(x<-1200){x=0;}
				$(".boxs").css({"margin-left":x+"px"})	
				
			})
			$(".left").click(function(){
				x=x+400;
				if(x>0){x=-1200;}
			
				$(".boxs").css({"margin-left":x+"px"})
			})
			$(".ball").click(function(){
				n=$(this).attr("title")
				x=-400*n
				$(".boxs").css({"margin-left":x+"px"})	
				
				
			})
		})
		</script>
	</script>
	</head>
	<body>
		<div class="show">
			<div class="con">
				<div class="left"><</div>
				<div class="right">></div>
			</div>
			<div class="balls">
				<div class="ball"title="0"></div>
				<div class="ball"title="1"></div>
				<div class="ball"title="2"></div>
				<div class="ball"title="3"></div>
			</div>
			<div class="boxs">
				<div class="box">
					<img src="请自行载入图片" alt="">
					<p>请自行输入文字</p>
				</div>
				<div class="box">
					<img src="请自行载入图片" alt="">
					<p>请自行输入文字</p>
				</div>
				<div class="box">
					<img src="请自行载入图片" alt="">
					<p>请自行输入文字</p>
				</div>
				<div class="box">
					<img src="请自行载入图片" alt="">
					<p>请自行输入文字</p>
				</div>
			</div>
		</div>
	</body>
</html>

效果不展示

点击小球可以切换图片
点击两侧也可以切换图片