JS——实现轮播图（完整功能）

article/2025/11/10 9:05:30

没有把细节单拎出来讲，但基本上所有重要步骤都在代码里边备注解释了~~

个人认为比较难的地方就是：

怎么在自动播放到最后一张图片后，瞬间切换回第一张图片重新播放？

这里采用了比较取巧的方法，比如我用了四张例图，然后我把第一张再次添加到最后，就是这样：
在这里插入图片描述
然后在setA函数中，做这样一个判断

		if (index >= imgArr.length - 1) {index = 0// 此时我们设置的是，最后一张图片和第一张图片相同，// 因此通过css把最后一张瞬间切换到第一张！！！ul.style.left = 0}

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- tool.js中的move函数 --><script src="js/tools.js" type="text/javascript" charset="utf-8"></script><style type="text/css">* {margin: 0;padding: 0;}/* 总div的样式 */#outer {/* 图片宽度是640，li设置的坐和右的外边距都是10，所以外容器宽度设置成660px */width: 660px;height: 639px;background-color: #bfa;margin: 50px auto;padding: 10px 0;/* 子绝父相 */position: relative;/* 裁减掉自身宽度之外的元素 */overflow: hidden;}/* ul的样式 */#ul {/* 去掉点 */list-style: none;/* （图片宽640+图片间的外边距10+10）x 4 */width: 2640px;/* 开启绝对定位，方便移动left来显示不同的图片 */position: absolute;/* 通过js来控制left的值 */left: 0px;}/* 图片放在li中 */#ul li {/* li是块元素，通过浮动使其中的图片排列到一行去 */float: left;/* 图片间的外边距 */margin: 0 10px;}/* 图片下方导航条的样式 */#navDiv {/* 开启绝对定位，为了将其移动到图片下方 */position: absolute;/* 移动位置到下边 */bottom: 20px;}/* 每一个导航格都是一个超链接，和对应顺序的图片绑定 */#navDiv a {width: 20px;height: 20px;/* 行内元素不能设置宽高，故转换成行内块元素 */display: inline-block;background-color: #00CC00;margin: 0 10px;/* 透明效果 */opacity: 0.5;}#navDiv a:hover {background-color: black;}</style><script type="text/javascript">window.onload = function() {// 获取保存图片的数组var imgArr = document.getElementsByTagName("img")var ul = document.getElementById("ul")// 设置ul的动态宽度ul.style.width = 660 * imgArr.length + "px"var navDiv = document.getElementById("navDiv")var outer = document.getElementById("outer")// 导航条居中navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth) / 2 + "px"// 默认选中的是第一张图片var index = 0var allA = document.getElementsByTagName("a")allA[index].style.backgroundColor = "black"// 创建自动切换图片函数var flagfunction autoChange() {flag = setInterval(function() {// 索引自增index++// 防止索引超过图片数目index %= imgArr.length// move函数是存放在tools里边的move(ul, "left", -660 * index, 20, function() {// 修改导航点，让其随着图片的切换发生变化setA()})}, 2000)}autoChange()// 点击li中超链接，显示对应顺序的图片，给所有的超链接绑定单机响应函数for (var i = 0; i < allA.length; i++) {// 为每一个超链接添加一个num属性allA[i].num = iallA[i].onclick = function() {clearInterval(flag)// alert(this.num)// 获取超链接的索引index = this.numsetA()  // 使用move函数切换图片move(ul, "left", -660 * index, 30, function() {// 单机动画结束之后，图片要继续自动播放autoChange()})}}// 设置一个方法专门来设置选中的超链接（导航块） function setA() {// 判断当前索引是不是最后一张图片if (index >= imgArr.length - 1) {index = 0// 此时我们设置的是，最后一张图片和第一张图片相同，// 因此通过css把最后一张瞬间切换到第一张！！！ul.style.left = 0}// 遍历所有的a,都设置成lvsefor (var i = 0; i < allA.length; i++) {// 但期数设置的是空字符串，防止这个属性变成内联样式消掉hovor效果allA[i].style.backgroundColor = ""}// 将选中的a变成黑色allA[index].style.backgroundColor = "black"}}</script></head><body><div id="outer"><ul id="ul"><li><img src="img/1.jpg"></li><li><img src="img/2.jpg"></li><li><img src="img/3.jpg"></li><li><img src="img/4.jpg"></li><!-- 在最后加一个第一张图片 --><li><img src="img/1.jpg"></li></ul><div id="navDiv"><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><!-- <a href="javascript:;"></a> --></div></div></body>
</html>

tool.js中的move函数：

// 封装成函数// var flagfunction move(obj, attr, target, speed, callBack){/* * obj：移动对象* attr：执行样式* target：目标位置* speed：移动速度* callBack：回调函数*/clearInterval(obj.flag)var current = parseInt(window.getComputedStyle(obj, null)[attr])if(current > target){speed = -speed}obj.flag = setInterval(function(){var oldValue = parseInt(window.getComputedStyle(obj, null)[attr])var newValue = oldValue + speedif(speed > 0 && newValue > target || speed < 0 && newValue < target){newValue = target}obj.style[attr] = newValue + "px"if(newValue == target){clearInterval(obj.flag)callBack && callBack()}}, 30)}