jQuery 实现 图片框切换【与原生 JS 对比】

// 原生JavaScript实现
document.addEventListener('DOMContentLoaded', function() {
    var currentImageIndex = 0;
    var images = document.querySelectorAll('.img-container img');
 
    function showImage(imageIndex) {
        images[currentImageIndex].classList.remove('active');
        images[imageIndex].classList.add('active');
        currentImageIndex = imageIndex;
    }
 
    document.getElementById('prev').addEventListener('click', function() {
        if (currentImageIndex > 0) {
            showImage(currentImageIndex - 1);
        }
    });
 
    document.getElementById('next').addEventListener('click', function() {
        if (currentImageIndex < images.length - 1) {
            showImage(currentImageIndex + 1);
        }
    });
 
    showImage(currentImageIndex); // 初始显示第一张图片
});

这段代码使用原生JavaScript实现了图片框的切换功能。它监听DOM加载完成后，绑定了向前和向后翻页的事件监听器，并在页面加载时显示第一张图片。