当前位置：首页 > ai >正文

使用JavaScript实现轮播图的自动切换和左右箭头切换效果

ai 2025/7/30 7:53:57

HTML代码

<body><!-- 轮播图图片 --><div class="inner"><ul class="innerbox"><li><img src="../img/tu1.jpg" alt=""></li><li><img src="../img/tu2.jpg" alt=""></li><li><img src="../img/tu3.jpg" alt=""></li></ul><!-- 轮播图左右箭头切换 --><ul class="item"><li class="left" role="button"><</li><li class="right" role="button">></li></ul></div>
</body>

CSS代码

*{margin: 0;padding: 0;
}
li{list-style-type: none;
}
/* 轮播图片 */
.inner{height:350px;width:40%;position: relative;margin: 200px auto;overflow: hidden;
}
.innerbox, .innerbox li, .innerbox li img{width: 100%;height: 100%;
}
.innerbox{width: 300%; /* 6张图片 */position: relative;left: -100%;display: flex;
}
.innerbox li img{object-fit: cover;/* 图片不变形 */
}
/* 轮播图左右箭头切换 */
.item{position: absolute;width: 85%;height: 50px;left: 40px;top: 150px;
}
.left, .right{font-size: 40px;font-weight: bold;color: #8F939F;width: 50px;height: 50px;text-align: center;line-height: 45px;border-radius: 25px;background: rgba(208, 208, 208, 0.5);cursor:pointer;/* 鼠标形状 */
}
.left{float: left;
}
.right{float: right;
}

JavaScript代码

parseInt()方法：转成整数，保留字符串中的数字

设置定时器自动播放

var innerbox = document.querySelector(".innerbox")// 获取单个轮播图的宽度
var slideWidth = document.querySelector(".innerbox li").offsetWidth
// 初始位置
innerbox.style.left = "0px"// 设置定时器
setInterval(function(){// target_position目标位置var target_position =  parseInt(innerbox.style.left) - slideWidth// 判断边界值  如果目标位置小于3张图片的位置，立马返回第一张的位置if(target_position<-slideWidth*2){target_position = 0}innerbox.style.left = target_position + "px"
},4000)

设置左右箭头切换

var left = document.querySelector(".left")
var right = document.querySelector(".right")// 往上一张切换
left.onclick = function(){var target_position =  parseInt(innerbox.style.left) + slideWidthif(target_position>0){target_position = -slideWidth*2}innerbox.style.left = target_position + "px"
}
// 往下一张切换
right.onclick = function(){var target_position =  parseInt(innerbox.style.left) - slideWidthif(target_position<-slideWidth*2){target_position = 0}innerbox.style.left = target_position + "px"
}

可以看出自动播放和左右切换的代码逻辑相似，代码重复较多，可以进行优化：写一个核心的切换方法

// 核心切换方法
var change = function(num){// target_position目标位置var target_position =  parseInt(innerbox.style.left) + num// 图片一部到位// 判断边界值  如果目标位置小于3张图片的位置，立马返回第一张的位置if(target_position<-slideWidth*2){target_position = 0}else if(target_position>0){target_position = -slideWidth*2}innerbox.style.left = target_position + "px"
}// 自动切换
setInterval(function(){change(-slideWidth)
},4000)// 往上一张切换
left.onclick = function(){change(slideWidth)
}
// 往下一张切换
right.onclick = function(){change(-slideWidth)
}

可以看出往下一张切换和自动切换代码依然冗余，可以进一步优化：两段代码写在一起

// 往下一张切换
right.onclick = function(){change(-slideWidth)
}
// 自动切换
setInterval(right.onclick,4000)

问题：点击左右切换时，自动轮播也在进行中，会出现冲突

解决方法：在使用手动左右切换时，让自动切换停止

// 自动切换
var timer =  setInterval(right.onclick,4000)// 鼠标进行手动切换时，自动切换停止
left.onmouseenter = function(){clearInterval(timer)
}
right.onmouseenter = function(){clearInterval(timer)
}// 鼠标离开手动切换，自动切换开始
left.onmouseleave = function(){timer = setInterval(right.onclick,4000)
}
right.onmouseleave = function(){timer = setInterval(right.onclick,4000)
}

优化后的完整代码

var innerbox = document.querySelector(".innerbox")
var left = document.querySelector(".left")
var right = document.querySelector(".right")// 获取单个轮播图的宽度
var slideWidth = document.querySelector(".innerbox li").offsetWidth
// 初始位置
innerbox.style.left = "0px"// 核心切换方法
var change = function(num){// target_position目标位置var target_position =  parseInt(innerbox.style.left) + num// 图片一部到位// 判断边界值if(target_position<-slideWidth*2){target_position = 0}else if(target_position>0){target_position = -slideWidth*2}innerbox.style.left = target_position + "px"
}// 往上一张切换
left.onclick = function(){change(slideWidth)
}
// 往下一张切换
right.onclick = function(){change(-slideWidth)
}
// 自动切换
var timer =  setInterval(right.onclick,4000)// 鼠标进行手动切换时，自动切换停止
left.onmouseenter = function(){clearInterval(timer)
}
right.onmouseenter = function(){clearInterval(timer)
}// 鼠标离开手动切换，自动切换开始
left.onmouseleave = function(){timer = setInterval(right.onclick,4000)
}
right.onmouseleave = function(){timer = setInterval(right.onclick,4000)
}