JavaScript原生轮播图_function change(){ for(var i = 0; i<imgli.length; -优快云博客

本文链接：https://blog.youkuaiyun.com/dongdongaa0/article/details/112219138
效果：
在这里插入图片描述
代码：
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			ul,
			li {
				list-style: none;
			}
			
			.banner {
				width: 1200px;
				height: 535px;
				border: 1px solid red;
				margin: 0 auto;
				position: relative;
			}
			
			.slider li {
				position: absolute;
				left: 0;
				top: 0;
			}
			
			a {
				width: 40px;
				height: 50px;
				background-color: rgba(0, 0, 0, 0.1);
				font-size: 50px;
				text-align: center;
				line-height: 50px;
				position: absolute;
				text-decoration: none;
				color: gray;
			}
			
			.btnl {
				left: 0;
				top: 50%;
				margin-top: -15px;
			}
			
			.btnr {
				right: 0;
				top: 50%;
				margin-top: -25px;
			}
			
			.tabs {
				position: absolute;
				bottom: 20px;
				left: 50%;
				margin-left: -75px;
			}
			
			.tabs li {
				width: 15px;
				height: 15px;
				background-color: #ccc;
				border-radius: 50%;
				float: left;
				margin-right: 10px;
			}
		</style>
	</head>

	<body>
		<div class="banner">
			<ul class="slider">
				<li><img src="img/b1.jpg" alt="" /></li>
				<li><img src="img/b2.jpg" alt="" /></li>
				<li><img src="img/b3.jpg" alt="" /></li>
				<li><img src="img/b4.jpg" alt="" /></li>
				<li><img src="img/b5.jpg" alt="" /></li>
				<li><img src="img/b6.jpg" alt="" /></li>
			</ul>
			<a href="javascript:void(0);" class="btnl">
				<</a>
					<a href="javascript:void(0);" class="btnr">></a>
					<ul class="tabs">
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
		</div>
		<script type="text/javascript">
			var banner = document.getElementsByClassName("banner")[0];
			var slider = document.getElementsByClassName("slider")[0];
			var li = slider.getElementsByTagName("li");
			var btnl = document.getElementsByClassName("btnl")[0];
			var btnr = document.getElementsByClassName("btnr")[0];
			var tabs = document.getElementsByClassName("tabs")[0];
			var btns = tabs.getElementsByTagName("li");

			//初始化
			btns[0].style.backgroundColor = "red";

			for(var i = 0; i < li.length; i++) {
				if(i == 0) {
					continue;
				} else {
					li[i].style.opacity = 0;
				}
			}

			var timer = setInterval(mover, 1000);

			//声明一个变量，代表当前图片的下标
			var num = 0;

			function mover() {
				num++;
				if(num == li.length) {
					num = 0;
				}
				for(var i = 0; i < li.length; i++) {
					li[i].style.opacity = 0;
					btns[i].style.backgroundColor = "#ccc";
				}
				li[num].style.opacity = 1;
				btns[num].style.backgroundColor = "red";

			}

			function movel() {
				num--;
				if(num == -1) {
					num = li.length - 1;
				}
				for(var i = 0; i < li.length; i++) {
					li[i].style.opacity = 0;
					btns[i].style.backgroundColor = "#ccc";
				}
				li[num].style.opacity = 1;
				btns[num].style.backgroundColor = "red";
			}

			banner.onmouseover = function() {
				clearInterval(timer)
			}

			banner.onmouseout = function() {
				timer = setInterval(mover, 1000)
			}

			btnl.onclick = function(e) {
				movel();
			}
			btnr.onclick = function(e) {
				mover();
			}

			// 小圆点效果
			for(var i = 0; i < btns.length; i++) {
				btns[i].index = i;
				btns[i].onmouseover = function() {
					if(this.index == num) {
						return;
					} else {
						for(var i = 0; i < li.length; i++) {
							li[i].style.opacity = 0;
							btns[i].style.backgroundColor = "#ccc";
						}
						li[this.index].style.opacity = 1;
						btns[this.index].style.background="red";
						num=this.index;
					}
				}
			}
		</script>
	</body>

</html>>