JS案例：轮播图

最新推荐文章于 2024-03-16 17:51:24 发布

pe11223

最新推荐文章于 2024-03-16 17:51:24 发布

阅读量191

点赞数

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/pe11223/article/details/128680001

版权

需求
1.鼠标不在图片上方时，进行自动轮播，并且左右箭头不会显示当鼠标放在图片上方时，停止轮播，并且左右箭头会显示;
2.图片切换之后，图片中下方的小圆点会同时进行切换，并且点击相应的小圆点可以切换到相应的图片上;
3.点击左右箭头可以进行左右图片的切换
4.图片上需有介绍的文字，会随图片切换一起进行切换

原理
获取并绑定对应图片和圆点，利用定时器和点击事件，来控制鼠标移入移出事件。

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,
		minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>Js实现轮播图</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			a{
				list-style: none;
			}
			li{
				list-style: none;
			}
			.lunbo{
				width: 100%;
			}
			.content{
				height: 500px;
				width: 888.9px;
				margin: 20px auto;
				position: relative;
			}
			#item{
				width: 100%;
				height: 100%;
				
			}
			.item{
				position: absolute;
				opacity: 0;
				transition: all 1s;
				
			}
			.item.active{
				opacity:1;
			}
			img{
				display: inline-block;
				height: 500px;
				width: 888.9px;
			}
			#btn-left{
				width: 30px;
				height: 69px;
				font-size: 30px;
				color: white;
				background-color:rgba(0,0,0,0.4);
				line-height: 69px;
				padding-left:5px;
				z-index: 10;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-60%);/*使按钮向上偏移居中对齐*/
				cursor: pointer;
				opacity: 0;/*平时隐藏*/
			}
			.lunbo:hover #btn-left{
				/*鼠标滑入，显示图标*/
				opacity: 1;
			}

			#btn-right{
				width: 26px;
				height: 69px;
				font-size: 30px;
				color: white;
				background-color:rgba(0,0,0,0.4);
				line-height: 69px;
				padding-left: 5px;
				z-index: 10;
				position: absolute;
				right: 0;
				top: 50%;
				cursor: pointer;
				opacity: 0;
				transform: translateY(-60%);
			}
			.lunbo:hover #btn-right{
				opacity: 1;
			}
			#circle{
				height: 20px;
				display: flex;
				position: absolute;
				bottom: 35px;
				right: 25px;
			}
			.circle{
				width: 10px;
				height: 10px;
				border-radius: 10px;
				border: 2px solid white;
				background: rgba(0,0,0,0.4);
				cursor: pointer;
				margin: 5px;
			}
			.white{
				background-color: #FFFFFF;
			}
			.top{
				height: 200px;
				background-color: black;
				color: white;
				font-size: 50px;
				margin-bottom: 200px;
				line-height: 200px;
				text-align: center;
			}
			#item img{
				display: block;
			}
			#item p{
				position: absolute;
				top: 0;
				left: 50%;
				font-size: 20px;
			}
		</style>
		<script>
			window.onload=function(){
				var items=document.querySelectorAll(".item");
				var circles=document.getElementsByClassName("circle");
				var leftBtn=document.getElementById("btn-left");
				var rightBtn=document.getElementById("btn-right");
				var content=document.querySelector('.content');
				var index=0;
				var timer=null;
				
				//清除class
				var clearclass=function(){
					for(let i=0;i<items.length;i++){
						items[i].className="item";
						circles[i].className="circle";
						circles[i].setAttribute("num",i);
					}
				}
				//选定突出显示
				function move(){
					clearclass();
					items[index].className="item active";
					circles[index].className="circle white";
				}
				//点击右边按钮切换下一张图片
				rightBtn.onclick=function(){
					if(index<items.length-1){
						index++;
					}
					else{
						index=0;
					}
					move();
				}
				//点击左边按钮切换上一张图片
				leftBtn.onclick=function(){
					if(index<items.length){
						index--;
					}
					else{
						index=items.length-1;
					}
					move();
				}
				//开始定时器，点击右边按钮，实现轮播
				timer=setInterval(function(){
					rightBtn.onclick();
				},1500)
				//圆点和图片绑定
				for(var i=0;i<circles.length;i++){
					circles[i].addEventListener("click",function(){
						var point_index=this.getAttribute("num");
						index=point_index;
						move();
					})
				
				}
				//鼠标移入清除定时器，并开启一个三秒的定时器
				content.onmouseover=function(){
					clearInterval(timer);
						timer=setInterval(function(){
							rightBtn.onclick();
						},3000)
				}
				//鼠标移出开启定时器
				content.onmouseleave=function(){
					clearInterval(timer);
					timer=setInterval(function(){
						rightBtn.onclick();
					},1500)
				}
    		}
		</script>
	</head>
	<body>
		<div class="top">
			JS轮播图
		</div>
		<div class="lunbo">
			<div class="content">
			<ul id="item">
				<li class="item">
					<a href="#"><img src="./a.jpg" ></a>
					<p>ON.1</p>
				</li>
				<li class="item">
					<a href="#"><img src="./b.jpg" ></a>
					<p>ON.2</p>
				</li>
				<li class="item">
					<a href="#"><img src="./c.jpg" ></a>
					<p>ON.3</p>
				</li>
			</ul>
			<div id="btn-left"><</div>
			<div id="btn-right">></div>
			<ul id="circle">
				
				<li class="circle"></li>
				<li class="circle"></li>
				<li class="circle"></li>

			</ul>
			</div>
		</div>
	</body>
</html>