请手写一个幻灯片的效果

在前端开发中，实现一个幻灯片效果通常涉及到HTML、CSS和JavaScript的使用。下面是一个简单的幻灯片效果示例，使用纯JavaScript进行图片切换。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单幻灯片效果</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="slideshow">
        <img id="slideshowImage" src="image1.jpg" alt="Slideshow Image">
        <button id="prevButton">上一张</button>
        <button id="nextButton">下一张</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {
    font-family: Arial, sans-serif;
    text-align: center;
}

.slideshow {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

#slideshowImage {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
}

#prevButton {
    left: 10px;
}

#nextButton {
    right: 10px;
}

JavaScript (script.js)

document.addEventListener('DOMContentLoaded', function() {
    const images = ['image1.jpg', 'image2.jpg', 'image3.jpg']; // 图片数组，根据需要替换
    let currentIndex = 0;
    const slideshowImage = document.getElementById('slideshowImage');
    const prevButton = document.getElementById('prevButton');
    const nextButton = document.getElementById('nextButton');
    
    // 更新图片函数
    function updateImage() {
        slideshowImage.src = images[currentIndex];
    }
    
    // 上一张图片事件处理函数
    prevButton.addEventListener('click', function() {
        currentIndex--;
        if (currentIndex < 0) {
            currentIndex = images.length - 1; // 循环到最后一张图片
        }
        updateImage();
    });
    
    // 下一张图片事件处理函数
    nextButton.addEventListener('click', function() {
        currentIndex++;
        if (currentIndex >= images.length) {
            currentIndex = 0; // 循环到第一张图片
        }
        updateImage();
    });
});