dedecms 图片轮播代码

<div class="slider">
    <div class="slides">
        <img src="/uploads/1.jpg" alt="Slide 1">
        <img src="/uploads/2.jpg" alt="Slide 2">
        <img src="/uploads/3.jpg" alt="Slide 3">
    </div>
    <button class="prev">Prev</button>
    <button class="next">Next</button>
</div>

<style>
.slider {
    width: 100%;
    overflow: hidden;
}
.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
}
.slides img {
    width: 100%;
    flex-shrink: 0;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    let slides = document.querySelector('.slides');
    let prevBtn = document.querySelector('.prev');
    let nextBtn = document.querySelector('.next');
    let slideIndex = 0;

    function showSlide(index) {
        slides.style.transform = `translateX(-${index * 100}%)`;
    }

    prevBtn.addEventListener('click', function() {
        slideIndex--;
        if (slideIndex < 0) slideIndex = slides.children.length - 1;
        showSlide(slideIndex);
    });

    nextBtn.addEventListener('click', function() {
        slideIndex++;
        if (slideIndex >= slides.children.length) slideIndex = 0;
        showSlide(slideIndex);
    });
});
</script>