原生JS实现轮播 


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	
	<style>
		* {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		.wrap {
			height: 400px;
			width: 500px;
			margin: 60px auto;
			overflow: hidden;
			position: relative;
			margin: 100px auto;
		}

			.wrap ul {
				position: absolute;
			}

				

			.wrap ol {
				position: absolute;
				right: 5px;
				bottom: 10px;
			}

				.wrap ol li {
					height: 20px;
					width: 20px;
					background: #ccc;
					border: solid 1px #666;
					margin-left: 5px;
					color: #000;
					float: left;
					line-height:inherit;
					text-align: center;
					cursor: pointer;
				}

				.wrap ol .on {
					background: #E97305;
					color: #fff;
				}
	</style>
	<script type="text/javascript">
        window.onload = function () {
			var wrap = document.getElementById('wrap'),
				pic = document.getElementById('pic').getElementsByTagName("li"),
				list = document.getElementById('list').getElementsByTagName('li'),
				index = 0,
				timer = null;

			// 定义并调用自动播放函数
			timer = setInterval(autoPlay, 2000);

			// 鼠标划过整个容器时停止自动播放
			wrap.onmouseover = function () {
				clearInterval(timer);
			}

			// 鼠标离开整个容器时继续播放至下一张
			wrap.onmouseout = function () {
				timer = setInterval(autoPlay, 2000);
			}
			// 遍历所有数字导航实现划过切换至对应的图片
			for (var i = 0; i < list.length; i++) {
				list[i].onmouseover = function () {
					clearInterval(timer);
					index = this.innerText - 1;
					changePic(index);
				};
			};

			function autoPlay() {
				if (++index >= pic.length) index = 0;
				changePic(index);
			}

			// 定义图片切换函数
			function changePic(curIndex) {
				for (var i = 0; i < pic.length; ++i) {
					pic[i].style.display = "none";
					list[i].className = "";
				}
				pic[curIndex].style.display = "block";
				list[curIndex].className = "on";
			}

		};

	</script>
</head>
<body>
	<div class="wrap" id='wrap'>
		<ul id="pic">
			<li><img src="Images/p1.webp" alt=""></li>
		    <li><img src="Images/p2.webp" alt=""></li>
			 <li><img src="Images/p3.webp" alt=""></li>	
			 <li><img src="Images/p4.webp" alt=""></li>	
			

		</ul>
		<ol id="list">
			<li class="on">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ol>
	</div>
</body>
</html>

效果图

posted @ 2020-06-03 14:14  南墙1  阅读(155)  评论(0)  编辑  收藏  举报