jsp实现图片轮播

<!DOCTYPE html>
<html>
<head>
    <title>图片轮播</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="carousel">
        <div class="carousel-inner">
            <c:forEach items="${imageList}" var="image">
                <div class="carousel-item">
                    <img src="${image.url}" alt="${image.description}">
                </div>
            </c:forEach>
        </div>
        <button class="carousel-control prev">&#10094;</button>
        <button class="carousel-control next">&#10095;</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

.carousel {
    position: relative;
    width: 80%;
    margin: auto;
}

.carousel-inner {
    display: flex;
    overflow: hidden;
}

.carousel-item {
    min-width: 100%;
    transition: transform 0.5s ease-in-out;
}

.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

document.addEventListener('DOMContentLoaded', function() {
    const carouselInner = document.querySelector('.carousel-inner');
    const items = document.querySelectorAll('.carousel-item');
    let currentIndex = 0;

    function moveToIndex(index) {
        if (index < 0) {
            index = items.length - 1;
        } else if (index >= items.length) {
            index = 0;
        }
        currentIndex = index;
        const offset = -currentIndex * 100;
        carouselInner.style.transform = `translateX(${offset}%)`;
    }

    document.querySelector('.prev').addEventListener('click', () => moveToIndex(currentIndex - 1));
    document.querySelector('.next').addEventListener('click', () => moveToIndex(currentIndex + 1));

    // 自动轮播
    setInterval(() => moveToIndex(currentIndex + 1), 3000);
});

<%@ page import="java.util.List" %>
<%@ page import="com.example.Image" %>
<%
    List<Image> imageList = (List<Image>) request.getAttribute("imageList");
%>