使用javas实现简单banner

爱被打了一巴掌 2024-04-17 21:39 39阅读 0赞

### html代码 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<link rel="stylesheet" type="text/css" href="../css/style.css"/>
    	</head>	
    	<body>
    		<div class="swiper">
    			<div class="imglist">
    				<div class="imgitem" style="background-image: url(../img/swiper1.webp);"></div>
    				<div class="imgitem" style="background-image: url(../img/swiper2.jpg);"></div>
    				<div class="imgitem" style="background-image: url(../img/swiper3.webp);"></div>
    			</div>
    			<div class="btn">
    				<div class="rightBtn"></div>
    				<div class="leftBtn"></div>
    			</div>
    			<div class="circlelist">
    				<div class="circleItem"></div>
    				<div class="circleItem"></div>
    				<div class="circleItem"></div>
    			</div>
    		</div>
    		<script type="text/javascript">
    			var imglist = document.querySelectorAll('.imgitem')
    			var ciclelist = document.querySelectorAll('.circleItem')
    			var imgnum = 0
    			
    			function renderImg (imgnum) {
    				imglist.forEach(function (item,index) {
    					if (index == imgnum) {
    						item.style.zIndex = 10
    						ciclelist[index].className = 'circleItem active'
    						item.style.opacity = 1
    					}else{
    						item.style.zIndex = 0
    						ciclelist[index].className = 'circleItem'
    						item.style.opacity = 0
    					}
    				})
    			}
    			
    			var leftBtn = document.querySelector('.leftBtn')
    			leftBtn.onclick = function () {
    				clearInterval(id)
    				imgnum--
    				if (imgnum < 0) {
    					imgnum = imglist.length - 1
    				}
    				renderImg(imgnum)
    			}
    			var rightBtn = document.querySelector('.rightBtn')
    		
    			rightBtn.onclick = function () {
    					clearInterval(id)
    				imgnum++
    				if (imgnum > imglist.length-1) {
    					imgnum = 0
    				}
    				renderImg(imgnum)
    			}
    			
    		
    			var id = setInterval(function () {
    				imgnum++
    				if (imgnum > imglist.length - 1) {
    					imgnum = 0
    				}
    				renderImg(imgnum)
    			},1000)
    			
    			
    			
    		</script>
    		
    	</body>
    </html>

### CSS样式 ###

*{
    	margin: 0;
    	padding: 0;
    }
    .swiper{
    	width: 1226px;
    	height: 460px;
    	position: relative;
    	margin: 0 auto;
    }
    .imglist{
    	width: 100%;
    	height: 100%;
    	position: absolute;
    	left: 0;
    	top: 0;
    }
    .imgitem{
    	width: 100%;
    	height: 100%;
    	position: absolute;
    	left: 0;
    	top: 0;
    	background-repeat: no-repeat;
    	background-position: center center;
    	background-size: auto 100%;
    	transition: 1s;
    	opacity: 0;
    }
    .leftBtn{
    	width: 70px;
    	height: 70px;
    	position: absolute;
    	left: 0;
    	top: calc(50% - 35px);
    	background-image:url(../img/leftBtn.png) ;
    	background-size: auto 100%;
    	z-index: 100;
    }
    .rightBtn{
    	width: 70px;
    	height: 70px;
    	right: 0;
    	position: absolute;
    	top: calc(50% - 35px);
    	background-image: url(../img/rightBtn.png);
    	background-repeat: no-repeat;
    	background-size: 100% auto;
    	z-index: 100;
    }
    .circlelist{
    	width: 100%;
    	height: 100px;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	position: absolute;
    	bottom: 0;
    	z-index: 100;
    }
    .circleItem{
    	width: 10px;
    	height: 10px;
    	border: 3px solid #ccc;
    	border-radius: 8px;
    	margin: 0 10px;
    }
    .circleItem.active{
    	width: 10px;
    	height: 10px;
    	border: 3px solid skyblue;
    	border-radius: 8px;
    	margin: 0 10px;
    }