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

// 原生JS实现图片框切换
function switchImage(imageBox, imageIndex) {
    var images = imageBox.getElementsByTagName('img');
    for (var i = 0; i < images.length; i++) {
        images[i].style.display = 'none';
    }
    images[imageIndex].style.display = 'block';
}
 
// jQuery实现图片框切换
$(document).ready(function() {
    $('.thumbnails img').click(function() {
        var imgIndex = $(this).index();
        $('.main-image img').eq(imgIndex).show().siblings().hide();
    });
});

这个例子展示了如何使用原生JavaScript和jQuery来实现图片框的切换功能。原生JS使用了Element.getElementsByTagName和Element.style.display来控制图片的显示和隐藏，而jQuery使用了$(selector).click(function)来绑定点击事件，并使用$(selector).show()和$(selector).hide()来切换图片的显示状态。