轮播图
<ul class="demo">
<li><img src="/轮播图/1.jpg" alt="" /></li>
</ul>
<div class="toggle">
<button class="left"><</button>
<button class="right">></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为负数,取模运算会将其调整到合法的范围内。

浙公网安备 33010602011771号