WEB前端作业——banner的切换

尘幽

已于 2023-03-31 00:12:41 修改

阅读量742

点赞数

分类专栏： JS HTML 文章标签：前端 javascript html

于 2023-03-31 00:05:42 首次发布

本文链接：https://blog.csdn.net/weixin_55822200/article/details/129869734

版权

HTML 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

实现banner的左右切换按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>

		<style>
			div,ul,li,a,span,img{
				margin:0;
				padding:0;
			}
			#banner { 
				overflow:hidden; 
				width:100%; 
				height:400px; 
				position:relative; 
				float:left;
				padding-bottom: 10px;
			}
			#tab>img:not(:first-child){ 
				display:none; 
			}
			.arrow {
				display: none;
				width: 30px;
				height: 60px;
				background-color: rgba(0,0,0,0.4);
				position: absolute;
				top: 50%;
				margin-top: -30px;
				z-index:999;
			}
			.arrow span {
				display: block;
				width: 10px;
				height: 10px;
				border-bottom: 2px solid #fff;
				border-left: 2px solid #fff;
			}
			.slider_left {
				margin: 25px 0 0 10px;
				transform: rotate(45deg);
			}
			.prve {
				left: 0;
			}
			.next {
				right: 0;
			}
			.slider_right {
				margin: 25px 0 0 5px;
				transform: rotate(-135deg);
			}
			.arrow:hover{
				background:#444;
			}
			#banner:hover .arrow{
				display:block;
			}
		</style>
	</head>
	<body>
		<div id="banner">
			<div id="tab">
				<img class="tabImg" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0cf5e958bc88727b50c5c5fba7a8f47a.jpg?w=632&h=340" height="400"/>
				<img class="tabImg" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6dd2f3e0de4e6cbba98fd3799cfa5bf7.jpg?w=632&h=340" height="400"/>
				<img class="tabImg" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d7d4be1a9e701e16de498f89b1865867.jpg?w=632&h=340" height="400"/>
			</div>
			<div class="arrow prve">
				<span class="slider_left"></span>
			</div>
			<div class="arrow next">
				<span class="slider_right"></span>
			</div>    
		</div>
		<script>
			var curIndex=0;
			var img_number = document.getElementsByClassName('tabImg').length;
			var _timer = setInterval(runFn,2000);
			function runFn(){         
				curIndex = ++curIndex == img_number ? 0 : curIndex;
				slideTo(curIndex);
			 }
	
			var prve = document.getElementsByClassName("prve");
			prve[0].onclick = function () {
				clearInterval(_timer);
				curIndex--;
				if(curIndex == -1){
					curIndex = img_number-1;
				}
				slideTo(curIndex);
				_timer = setInterval(runFn,2000);
			}
			
			var next = document.getElementsByClassName("next");
			next[0].onclick = function () {
				clearInterval(_timer);
				curIndex++;
				if(curIndex == img_number){
					curIndex =0;
				}
				slideTo(curIndex);
				_timer = setInterval(runFn,2000);
			}
			
			function slideTo(index){
				console.log(index)
				var index = parseInt(index);
				var images = document.getElementsByClassName('tabImg');
				for(var i=0;i<images.length;i++){
					if( i == index ){
						images[i].style.display = 'inline';           
					}else{
						images[i].style.display = 'none';
					}
				}
			}
		</script>
	</body>
</html>