jQuery實現(xiàn)的超簡單輪播圖功能示例【代碼解釋】

更新時間：2023年05月20日 16:00:27 作者：澤澤澤Ya

這篇文章主要介紹了jQuery實現(xiàn)的超簡單輪播圖功能,結合完整實例形式分析了基于jQuery實現(xiàn)的輪播圖相關功能實現(xiàn)、樣式設置與注意事項,需要的朋友可以參考下

先看效果
鼠標懸浮時停止輪播，離開時自動輪播，點下一張小圓點會隨著動

效果圖

直接上代碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery輪播圖</title>
		<script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
		<style>
			.wrapper {
				width: 600px;
				height: 350px;
				border: 1px solid red;
				position: relative;
			}
			/* 5張圖片疊加到一塊 */
			.wrapper img {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				display: none;
			}
			.wrapper img:nth-of-type(1) {
				display: block;
			}
			/* 小圓點 */
			.btn {
				width: 150px;
				display: flex;
				justify-content: space-around;
				position: absolute;
				left: 225px;
				bottom: 10px;
				z-index: 100
			}
			.btn span {
				display: block;
				width: 15px;
				height: 15px;
				border: 3px solid white;
				border-radius: 50%;
			}
			/* 左右箭頭 */
			.wrapper a {
				text-decoration: none;
				font-size: 50px;
				color: red;
				position: absolute;
				top: 35%;
			}
			.wrapper a:nth-of-type(1) {
				left: 10px;
			}
			.wrapper a:nth-of-type(2) {
				right: 10px;
			}
			.active {
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div>
			<div>
				<img src="./imgs/1.png" alt="">
				<img src="./imgs/2.png" alt="">
				<img src="./imgs/3.png" alt="">
				<img src="./imgs/4.png" alt="">
				<img src="./imgs/5.png" alt="">
			</div>
			<div>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
			<a href="javascript:void(0);" rel="external nofollow"  rel="external nofollow" ><</a>
			<a href="javascript:void(0);" rel="external nofollow"  rel="external nofollow" >">></a>
		</div>
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			var index=0;
			// 點擊上一張
			$("a:first").click(function(){
				prev_pic();
			})
			// 點擊下一張
			$("a:last").click(function(){
				next_pic();
			})
			// 懸浮停止
			$(".wrapper").mouseover(function(){
				clearInterval(id);
			});
			$(".wrapper").mouseout(function(){
					autoplay();
			})
			// 下一張
			function next_pic(){
				index++;
				if(index>4){
					index=0;
				}
				addStyle();
			}
			// 上一張
			function prev_pic(){
				index--;
				if(index<0){
					index=4;
				}
				addStyle();
			}
			// 控制圖片顯示隱藏,小圓點背景色
			function addStyle(){
				$("img").eq(index).fadeIn();
				$("img").eq(index).siblings().fadeOut();
				$("span").eq(index).addClass("active");
				$("span").eq(index).siblings().removeClass("active");
			}
			// 自動輪播
			var id;
			autoplay();
			function autoplay(){
				id=setInterval(function(){
					next_pic();
				},1000)
			}
		</script>
	</body>
</html>