原生 js 轮播图 (焦点图轮播)

废话不多说,
直接上代码,
可以直接拿来用,改img_src 数据就行
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			#container {
				position: relative;
				width: 70%;
				text-align: center;
				margin: 0 auto;
			}

			#main {
				margin: 20px;
				position: relative;
			}

			#main img {
				width: 90%;
				position: absolute;
				left: 50%;
				margin-left: -45%;
				top: 0;
			}

			#next {
				float: right;
			}

			#next,
			#prev {
				width: 200px;
				height: 200px;
				border-radius: 50%;
				border: none;
			}

			#prev {
				float: left;
			}

			ul {
				list-style: none;
				position: absolute;
				top: 330px;
				right: 200px;

			}

			ul li {
				width: 10px;
				height: 10px;
				background-color: #fff;
				border-radius: 50%;
				margin: 0 10px;
				display: inline-block;
				cursor: pointer;

			}

			li.active {
				background-color: #008B4A;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="main">
				<img>
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>

		</div>
		<button id="next">下一张</button>
		<button id="prev">上一张</button>

		<script type="text/javascript">
			//获取元素
			var btn_next = document.querySelector("#next");
			var btn_prev = document.querySelector("#prev");
			var main = document.querySelector("#main");
			var img = document.querySelector("img");
			var ul_li = document.querySelectorAll("ul li");

			var img_src = [
				"100ccd8be5b6a85a81759a6ad2953083.jpg",
				"67c7222fbcf98db942718eaf29f32297.webp",
				"7c2b5d308761d257483badf0bc4eca22.jpg",
				"918820682e4a490221cfd92b24c14b86.webp"
			]
			//定义当前图片在第几个
			var index_img = 0;

			function change() {
				img.setAttribute("src", `${img_src[index_img]}`);
				li_yuan();
			}
			change();

			//封装小圆点
			function li_yuan() {
				ul_li.forEach(function(item, index) {
					item.addEventListener("click", function() {
						clearInterval(time1);
						index_img = index;
						change();
						//点击小圆点 1秒 后重新开启定时器
						setTimeout(settime(), 1000);

					});
					//把所有li标签的class去掉
					item.classList.remove("active");
				})
				//给当前的设置为active
				ul_li[index_img].classList.add("active");
			}

			var time1 = 0;
			//定时器控制自动轮播
			//封装成一个函数,以便于多次调用
			function settime() {
				time1 = setInterval(function() {
					auto();
				}, 3000);
			}
			settime();

			//自动轮播函数
			function auto() {
				if (index_img == img_src.length - 1) {
					index_img = 0;
				} else {
					index_img++;
				}
				change();
			}

			//点击下一张
			btn_next.onclick = function() {
				clearInterval(time1);
				auto();
				settime();
			}

			//点击上一张
			btn_prev.onclick = function() {
				clearInterval(time1);
				if (index_img == 0) {
					index_img = img_src.length - 1;
				} else {
					index_img--;
				}
				change();
				settime();
			}
			//鼠标放在img上清除定时器
			img.addEventListener("mouseover", function() {
				clearInterval(time1);
			})
			img.addEventListener("mouseout", function() {
				settime();
			})
		</script>
	</body>
</html>
原生 js 轮播图 (焦点图轮播)

原生 js 轮播图 (焦点图轮播)

原生 js 轮播图 (焦点图轮播)

原生 js 轮播图 (焦点图轮播)

猜你喜欢
