使用JavaScript原生代码创建轮播图-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45114208/article/details/109735878

本文将介绍如何利用JavaScript实现一个基本的轮播图功能，包括左右箭头切换图片、小圆点指示器随图片变化、点击小圆点切换、自动切换以及淡入淡出效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.实现左右箭头点击图片切换的效果
2.实现小圆点随着图片切换跟随变化的效果
3.实现点击小圆点切换图片的功能
4.图片自动切换，且智能判断图片播放停止
5.实现图片切换时淡出的效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		#wrap{
			width: 1000px;
			margin: 50px auto;
			position: relative;
		}
		li{
			list-style: none;
		}
		#wrapImg li{
			display: none;
		}
		#left,#next{
			position: absolute;
			top: 45%;
			cursor: pointer;
			opacity: .7;
			transition: all .5s;
		}
		#left:hover,#next:hover{
			opacity: 1;
			transform: scale(1.1);
		}
		#left{
			left: 20px;
		}
		#next{
			right: 20px;
		}
		#square{
			position: absolute;
			bottom: 15px;
			left: 50%;
			transform: translateX(-50%);
		}
		#square li{
			width: 15px;
			height: 15px;
			float: left;
			margin-right: 8px;
			border-radius: 50%;
			background-color: #fff;
			cursor: pointer;
		}
		#square .fouc{
			background-color: blue;
		}
	</style>
</head>
<body>
	<div id="wrap">
		<ul id="wrapImg">
			<li style="display: block;"><img src="img/1.jpg" alt=""></li>
			<li><img src="img/2.jpg" alt=""></li>
			<li><img src="img/3.jpg" alt=""></li>
			<li><img src="img/4.jpg" alt=""></li>
			<li><img src="img/5.jpg" alt=""></li>
			<li><img src="img/6.jpg" alt=""></li>	
		</ul>
		<img src="img/l.png" alt="" id="left">
		<img src="img/r.png" alt="" id="next">
		<ul id="square">
		</ul>
	</div>

let liList = document.querySelectorAll("#wrapImg li");
		let left = document.getElementById("left");
		let next = document.getElementById("next");
		let addList = document.getElementById("square");
		//用于标记图片数组和小圆点数组的下标
		let n = 0;
		let odiv = document.getElementById("wrap");
		//用于显示当前li中的页面以及小圆点样式的函数
		function changeImg(){
			//所有图片在初识状态下全部隐藏，全透明
			for(let i = 0; i < liList.length; i++){
				liList[i].style.display = "none";
				liList[i].style.opacity = 0;
			}
			liList[n].style.display = "block";
			liList[n].style.opacity = 0;
			//图片淡出
			let autoOpac = setInterval(function(){	
				opac = parseFloat(liList[n].style.opacity);
				liList[n].style.opacity = opac + 0.0093;
				if(parseInt(liList[n].style.opacity) === 1){
					clearInterval(autoOpac);
				}
			},32)	
			//所有小圆点在初识状态下隐藏样式
			for(let i = 0; i < dataList.length; i++){
				dataList[i].className = "";
			}
			dataList[n].className = "fouc";
		}
		next.onclick = function(){
			if(n !== liList.length-1){
				n++;
			}
			else{
				n = 0;
			}
			changeImg();
		}
		left.onclick = function(){
			if(n == 0){
				n = liList.length - 1; 
			}
			else{
				n--;
			}
			changeImg();
		}
		//动态添加小圆点所在的li标签
		for(let i = 0; i < liList.length; i++){
			let li = document.createElement("li");
			li.className = "";
			//小圆点点击事件，要求图片随着小圆点的点击发生变化
			addList.appendChild(li);
			li.onclick = function(){
				li.setAttribute("index",i);
				n = li.getAttribute("index");
				changeImg();
			}
		}
		let dataList = addList.children;
		dataList[0].className = "fouc";


		//自动播放
		let autoPlay = setInterval(function(){
			next.click();
		},3000)
		//鼠标移上停止播放
		odiv.onmouseenter = function(){
			clearInterval(autoPlay);
		}
		//鼠标移下开始播放
		odiv.onmouseleave = function(){
			autoPlay = setInterval(function(){
				next.click();
			},3000)
		}