轮播图

<ul class="demo">
  <li><img src="/轮播图/1.jpg" alt="" /></li>
</ul>
<div class="toggle">
  <button class="left">&lt;</button>
  <button class="right">&gt;</button>
</div>
<script>
const sliderData = [
    { url: "/轮播图/1.jpg" },
    { url: "/轮播图/2.jpg" },
    { url: "/轮播图/3.jpg" },
];
    let currentIndex = 0;
    let random = parseInt(Math.random() * sliderData.length);
    const img = document.querySelector(".demo li img");
    img.src = sliderData[random].url;
    const left = document.querySelector(".left");
    const right = document.querySelector(".right");
    //播放上一张图片
    left.addEventListener("click", function () {
    currentIndex = (currentIndex - 1 + sliderData.length) % sliderData.length;
    img.src = sliderData[currentIndex].url;
});
    //播放下一张图片
    right.addEventListener("click", function () {
    currentIndex = (currentIndex + 1 + sliderData.length) % sliderData.length;
    img.src = sliderData[currentIndex].url;
});
</script>

CHATGPT
具体来说,(currentIndex - 1 + sliderData.length) % sliderData.length可以保证结果在0到sliderData.length - 1之间。如果currentIndex - 1为负数,取模运算会将其调整到合法的范围内。

posted @ 2023-06-01 17:18  Dou-D  阅读(42)  评论(0)    收藏  举报