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

HTML代码

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代码

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()方法：转成整数，保留字符串中的数字

设置定时器自动播放

javascript 复制代码

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)

设置左右箭头切换

javascript 复制代码

var left = document.querySelector(".left")
var right = document.querySelector(".right")

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

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

javascript 复制代码

// 核心切换方法
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)
}

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

javascript 复制代码

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

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

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

javascript 复制代码

// 自动切换
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)
}

优化后的完整代码

javascript 复制代码

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)
}