轮播整体代码

最新推荐文章于 2023-12-22 00:00:00 发布

Dearest one

最新推荐文章于 2023-12-22 00:00:00 发布

阅读量597

点赞数

文章标签：前端 js javascript

本文链接：https://blog.csdn.net/wb_javascript/article/details/121531369

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
	*{
		padding: 0;
		margin: 0;
		list-style: none;
	}
	body{
		background-color: rgb(170,190,250);
	}
	.main{
		width: 500px;
		height: 300px;
		border: 10px solid white;
		border-radius: 5px;
		box-shadow: 20px 30px 20px #333;
		margin: 100px auto;
		position: relative;
		transition: 0.5s ease;
		overflow: hidden;
	}
	.main .image{
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		position: relative;
		transition: 0.5s ease;
	}
	.main a{
		top: 50%;
		position: absolute;
		width: 40px;
		height: 80px;
		line-height: 80px;
		color: white;
		font-size: 18px;
		text-decoration: none;
		text-align: center;
		transform: translate(0,-50%);
		background-color: #33333360;
		display: none;
	}
	.main:hover a{
		display: block;
	}
	.main .image img{
		width: 100%;
	}
	.main .left{
		left: 0;
	}
	.main .right{
		right: 0;
	}
	
	.btnlist{
		width: 200px;
		height: 40px;
		
		display: flex;
		left: 50%;
		transform: translate(-50%, 0);
		z-index: 8;
		position: absolute;
		bottom: 10px;
		
	}
	.btnlist .btn{
		width: 30px;
		height: 30px;
		background-color: #ECF0F1;
		border-radius: 50%;
	}
	.btn.active{
		background-color: #E74C3C;
	}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="image">
				<img src="img/2.jpg" alt="哆啦A梦" class="img">
				<img src="img/3.jpg" alt="哆啦A梦" class="img">
				<img src="img/5.jpg" alt="哆啦A梦" class="img">
				<img src="img/6.jpg" alt="哆啦A梦" class="img">
				<img src="img/7.jpg" alt="哆啦A梦" class="img">
			</div>
			
			<div class="bottom">
				<a href="javascript:;" class="left"><</a>
				<a href="javascript:;" class="right">></a>
			</div>
			
			<ul class="btnlist">
				<li class="btn active" data-n="0"></li>
				<li class="btn" data-n="1"></li>
				<li class="btn" data-n="2"></li>
				<li class="btn" data-n="3"></li>
				<li class="btn" data-n="4"></li>
			</ul>
		
		</div>
	</body>
	<script type="text/javascript">
		var oLeft = document.querySelector('.left');
		var oRight =document.querySelector('.right');
		var oImgList = document.querySelector('.image');
		
		
	var clonefirst = oImgList.firstElementChild.cloneNode();
		oImgList.appendChild(clonefirst);
	var index=0;
	var lock =true;
	
		function handRight(){
			if(!lock)return;
			index++;
			oImgList.style.left = index * -500+'px';
			oImgList.style.transition = '0.5s ease';
			if(index ===5){
				index=0;
				setTimeout(()=>{
					oImgList.style.left = index * -500+'px';
					oImgList.style.transition='none';
				},500)
			
			}
			setCircles()
			lock =false;
			setTimeout(()=>{
				lock =true;
			},500)
		}
		oRight.addEventListener('click',handRight)
		
		
		
		oLeft.addEventListener('click',()=>{
		if(!lock)return;
			index--;
			if(index === -1){
				oImgList.style.left = 5 * -500+'px';
				oImgList.style.transition = 'none';
				
				index =4;
				setTimeout(()=>{
					oImgList.style.left = index * -500+'px';
					oImgList.style.transition = '0.5s ease';
				},0)
			
				
			}else{
				oImgList.style.left = index * -500+'px';
			}
			setCircles()
			lock=false;
			setTimeout(()=>{
				lock=true;
			},500)
		})
	
	
	
	
	//获取主体框架
	const oMain =document.querySelector('.main');
	//获取小圆点列表
	const btnlist = document.querySelector('.btnlist');
	//获取小圆点
	const obtn = document.querySelectorAll('.btn');
	//小圆点高光
	function setCircles(){
		
		for(let i=0;i<obtn.length;i++){
			if(i === index){
				obtn[i].classList.add('active');
			}else{
				obtn[i].classList.remove('active');					
			}
		}
	}   
	
	//点击小圆点跳转图片
	btnlist.addEventListener('click',(e)=>{
		
		if(e.target.nodeName.toLowerCase() === 'li'){
			//node获取元素名称;toLowerCase将他们转换为小写
			var a = Number(e.target.getAttribute('data-n'));
			index =a;
			// console.log(a)
			setCircles()
			oImgList.style.left = index * -500+'px';
		}
	})
	
	//开启自动轮播
	var abc = 	setInterval(handRight,2000);
	
	oMain.addEventListener('mouseenter',()=>{
		clearTimeout(abc);
	
	})
	oMain.addEventListener('mouseleave',()=>{
		clearTimeout(abc);
		abc = 	setInterval(handRight,2000);
	})
	
	
	</script>
</html>

Dearest one

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播整体代码

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; list-style: none; } body{ background-color: rgb(170,190,250); } .main{ w.
复制链接

扫一扫