原生JS实现轮播图效果_js list.style.left=left+'px';-优快云博客

本文介绍如何使用HTML、CSS和JavaScript创建一个带有自动轮播和单击导航功能的图片轮播图，包括关键代码示例和交互细节。

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

轮播图效果，主要有自动轮播和单击显示对应图片功能

图片路径自己加，这里只做示范

代码：

<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
		}

		#outer {
			width: 500px;
			height: 350px;
			margin: 0 auto;
			position: relative;
			overflow: hidden;
		}

		#imglist {
			list-style: none;
			position: absolute;
			left: 0px;
		}

		#imglist img {
			width: 500px;
			height: 350px;

		}

		#imglist li {
			float: left;
		}

		#navDiv {
			position: absolute;
			left: 200px;
			top: 300px;
		}

		#navDiv a {
			width: 15px;
			height: 15px;
			background-color: red;
			float: left;
			margin-left: 10px;
		}
	</style>
</head>

<body>
	<div id="outer">
		<!-- 所有的图片 -->
		<ul id="imglist">
			<li><img src="./2.jpg"></li>
			<li><img src="./1.jpg"></li>
			<li><img src="./3.jpg"></li>
		</ul>

		<!-- 导航按钮 -->
		<div id="navDiv">
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
		</div>
	</div>
</body>

</html>
<script type="text/javascript">
	//获取先关元素
	var imglist = document.querySelector('#imglist');
	var imgArr = document.querySelectorAll('img');
	var navDiv = document.querySelector('#navDiv');
	var allA = document.querySelectorAll('a');

	var timer; //用来存储定时器

	var index = 0; //模拟的图片的索引
	// 让轮播图动起来
	function autoChange() {

		timer = setInterval(function () {
			// 根据定位去动起来
			index++;

			//得到图片的索引
			index = index % imgArr.length;

			//等位 left的值 向左去一定 第一张：-500px 第二张 -1000px 依次类推
			imglist.style.left = -500 * index + 'px';

			for (var i = 0; i < allA.length; i++) {
				allA[i].style.backgroundColor = '';
			}

			// 排他思想
			allA[index].style.backgroundColor = 'black';

		}, 1000)
	}
	autoChange();


	for (var i = 0; i < allA.length; i++) {
		// 为每一个超链接添加一个num属性
		allA[i].num = i;

		allA[i].onmouseover = function () {
			index = this.num;

			//显示对应的图片  停止定时器
			imglist.style.left = -500 * index + 'px';
			clearInterval(timer)


			for (var i = 0; i < allA.length; i++) {
				allA[i].style.backgroundColor = '';
			}

			// 排他思想
			allA[index].style.backgroundColor = 'black';

		}

		// 鼠标移出的时候再一次启动定时器
		allA[i].onmouseout = function () {
			autoChange();
		}
	}
</script>

完事
祝你成功。