点击轮播图后刷新浏览器默认加载该点击图片的实现方案

jQuery 整合版本 #

直接在你现有的jQuery代码基础上修改，把点击时的索引存入localStorage，再在页面加载时读取该值调用currentSlide()：

$(document).ready(function () {
    // 点击轮播图时存储当前slide索引
    $('#myCarousel').on('click', '.mySlides', function () {
        const slideIndex = $(this).index('.mySlides') + 1;
        localStorage.setItem('lastClickedSlide', slideIndex);
    });

    // 页面加载时读取存储的索引，自动定位
    const savedIndex = localStorage.getItem('lastClickedSlide');
    if (savedIndex) {
        currentSlide(parseInt(savedIndex));
    }
});

原生JS 整合版本 #

如果想用纯原生JS实现，逻辑和上面一致：

// 页面加载时读取存储的索引并定位
window.addEventListener("load", (event) => {
    const savedIndex = localStorage.getItem('lastClickedSlide');
    if (savedIndex) {
        currentSlide(parseInt(savedIndex));
    }
});

// 给轮播图绑定点击事件，存储索引
document.addEventListener('DOMContentLoaded', () => {
    const carousel = document.getElementById('myCarousel');
    const slides = carousel.querySelectorAll('.mySlides');
    
    slides.forEach((slide, index) => {
        slide.addEventListener('click', () => {
            // 索引从1开始，和你原代码的currentSlide参数一致
            const slideIndex = index + 1;
            localStorage.setItem('lastClickedSlide', slideIndex);
        });
    });
});

关键说明 #

• localStorage会把数据持久化保存在浏览器中，除非手动清除或通过代码删除，刷新页面后数据不会丢失
• 注意索引的一致性：你的原代码中currentSlide()接收的是从1开始的索引（比如7对应第7张），所以存储和读取时都要保持+1的处理
• 如果需要清除保存的记录，可以调用localStorage.removeItem('lastClickedSlide')

内容的提问来源于stack exchange，提问作者hypnoc