实训小项目4：轮播图

DANEHONG

已于 2024-01-15 22:49:12 修改

阅读量373

点赞数 5

文章标签： javascript 前端 css

于 2024-01-15 22:48:06 首次发布

本文链接：https://blog.csdn.net/DANEHONG/article/details/135612985

版权

本文描述了一个HTML/CSS/JavaScript实现的轮播图效果，当鼠标移入图片时停止自动播放并显示箭头，点击箭头切换图片，鼠标移出时恢复自动播放。

摘要由CSDN通过智能技术生成

实现以下效果：

鼠标未放入图片上时，轮播图自动播放并且不显示向左向右翻页的箭头，当鼠标放入图片上时，轮播图停止自动播放，并显示向左向右翻页的箭头，点击箭头实现换图的功能。然后鼠标再次离开图片时，轮播图再次自动播放。

所需图片如下：

实现代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			.slide {
				width: 590px;
				height: 470px;
				margin: 50px auto;
				position: relative;
			}
			.slide img{
				position: absolute;
			}
			.slide .left,.slide .right{
				width: 0px;
				height: 0px;
				border: 20px solid rgba(0,0,0,0);
				position: absolute;
				z-index: 999;
				top: 45%;
			}
			.slide .left{
				border-right: 20px solid white;
			}
			.slide .right{
				border-left: 20px solid white;
				right: 0px;
			}
			.slide ul{
				list-style-type: none;
				position: absolute;
				bottom: 10px;
				left: 45%;
				z-index: 999;
			}
			.slide ul li{
				display: inline-block;
				width: 12px;
				height: 12px;
				background-color: white;
				border-radius: 50%;
			}
			.slide ul .active {
				background-color: orangered;
			}
			.slide .show{
				z-index: 888;
			}
		</style>
	</head>
	<body>
		<div class="slide">
			<div class="left"></div>
			<div class="right"></div>
			<img src="img/q1.jpg" alt="">
			<img src="img/q2.jpg" alt="">
			<img src="img/q3.jpg" alt="" class="show">
			<img src="img/q4.jpg" alt="">
			<img src="img/q5.jpg" alt="">
			<ul>
				<li></li>
				<li></li>
				<li class="active"></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<script type="text/javascript">
			var left=document.querySelector('.left');
			var right=document.querySelector('.right');
			var slide=document.querySelector('.slide');
			var imgs=document.getElementsByTagName('img');
			var lis=document.getElementsByTagName('li');
			
			var index=2;
			left.style.display='none';
			right.style.display='none';
			var time=null;
			slide.addEventListener('mouseenter',function(){
				left.style.display='block';
				right.style.display='block';
				clearInterval(time);
			},false);
			slide.addEventListener('mouseleave',function(){
				left.style.display='none';
				right.style.display='none';
				time=setInterval(function(){
					right.click();
				},2000);
			},false);
			
			left.addEventListener('click',function(){
				index--;
				if(index<0){
					index=4;
				}
				changeImg(index);
				changeActive(index);
			},false);
			right.addEventListener('click',function(){
				index++;
				if(index>4){
					index=0;
				}
				changeImg(index);
				changeActive(index);
			});
			
			
			function changeImg(index){
				for(var i=0;i<imgs.length;i++){
					if(imgs[i].classList.contains('show')){
						imgs[i].classList.remove('show');
					}
				}
				imgs[index].classList.add('show');
			};
			function changeActive(index){
				for(var i=0;i<imgs.length;i++){
					if(lis[i].classList.contains('active')){
						lis[i].classList.remove('active');
					}
				}
				lis[index].classList.add('active');
			}
		</script>
	</body>
</html>