js实现无缝轮播图

2023年6月11日上午2:17 • JavaScript

下面是“JS实现无缝轮播图”的完整攻略：

<div class="carousel">
    <ul class="img-box">
        <li><img src="1.jpg" alt=""></li>
        <li><img src="2.jpg" alt=""></li>
        <li><img src="3.jpg" alt=""></li>
        <li><img src="4.jpg" alt=""></li>
        <li><img src="5.jpg" alt=""></li>
        <li><img src="6.jpg" alt=""></li>
    </ul>
    <ul class="btn-box">
        <li class="btn active"></li>
        <li class="btn"></li>
        <li class="btn"></li>
        <li class="btn"></li>
        <li class="btn"></li>
        <li class="btn"></li>
    </ul>
    <div class="arrow-box">
        <div class="left-arrow"><</div>
        <div class="right-arrow">></div>
    </div>
</div>

其中img-box用来呈现轮播图，btn-box用来显示当前轮播图位置，arrow-box用来存放箭头。

3. CSS样式定义

在html构建完成后，定义CSS样式使得页面结构排版合理，样式代码如下：

.carousel {
    position: relative;
    overflow: hidden;
    width: 600px;
    height: 400px;
    margin: 0 auto;
}
.img-box {
    position: relative;
    list-style: none;
    width: 600%;
    height: 400px;
    margin: 0;
    padding: 0;
    left: 0;
    transition: left 0.5s ease-in-out;
}
.img-box li {
    position: relative;
    float: left;
    width: 16.66667%;
    height: 400px;
}
.img-box li img {
    width: 100%;
    height: 100%;
}
.btn-box {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
.btn {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 5px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
}
.btn.active {
    background: #f40;
}
.arrow-box {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 35px;
    height: 60px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.arrow-box:hover {
    opacity: 1;
}
.left-arrow,
.right-arrow {
    position: absolute;
    top: 50%;
    margin-top: -15px;
    width: 16px;
    height: 30px;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    line-height: 30px;
    background: #000;
    cursor: pointer;
    z-index: 99;
}
.left-arrow {
    left: 0;
}
.right-arrow {
    right: 0;
}

4. JS实现无缝轮播图

在html和css都已经完成后，使用JS实现“无缝轮播”的功能。首先我们需要获取所有需要操作的元素。

let carousel = document.querySelector('.carousel');
let imgBox = document.querySelector('.img-box');
let imgList = document.querySelectorAll('.img-box li');
let btnList = document.querySelectorAll('.btn-box .btn');
let arrowBox = document.querySelector('.arrow-box');
let leftArrow = document.querySelector('.left-arrow');
let rightArrow = document.querySelector('.right-arrow');

获取到元素后，需要给每个位置按钮icon绑定点击事件，触发点击事件后会跳转到对应的位置。

for (let i = 0; i < btnList.length; i++) {
   btnList[i].onclick = function () {
      // 切换轮播图片位置
      imgBox.style.left = -i * imgList[0].offsetWidth + 'px';
      // 切换当前位置按钮的active类名
      for (let j = 0; j < btnList.length; j++) {
         btnList[j].classList.remove('active');
      }
      btnList[i].classList.add('active');
      // 获取当前显示的图片位置
      curIndex = i;
   }
}

接着，通过定时器自动轮播，切换图片位置。同时，在首尾轮播切换时，通过JS动态添加和删除节点，实现无缝连接效果。

// 设置定时器自动轮播
let timer = setInterval(() => {
   // 判断当前是否为最后一张图片，如果是则返回第一张图片
   if (curIndex === imgList.length - 1) {
      imgBox.appendChild(imgList[0].cloneNode(true));
      // 过渡效果结束后，删除clone的图片节点，保证轮播的正常性
      imgBox.addEventListener('transitionend', function () {
         imgBox.removeChild(imgList[imgList.length - 1]);
         // 过渡完毕后索引设为0
         curIndex = 0;
      }, false);
   } else {
      curIndex++;
   }
   // 根据当前位置的变化，切换轮播图
   imgBox.style.left = -curIndex * imgList[0].offsetWidth + 'px';
   // 切换当前位置按钮的active类名
   for (let j = 0; j < btnList.length; j++) {
      btnList[j].classList.remove('active');
   }
   btnList[curIndex].classList.add('active');
}, 2000);

完成以上JS代码，我们就实现了“JS实现无缝轮播图”的完整攻略。