让我们一步步解决你的问题，先拆解原代码里的核心问题，再给出完整的修复方案：

问题分析 #

1. currentDiv函数无法定位点击的缩略图：原代码里document.querySelector('dots.img')选择器错误（正确写法是.dots img），而且就算选择器正确，也只会拿到页面里第一个图片，不是用户实际点击的那一个。
2. 没有传递点击元素到函数：调用currentDiv()时没把点击的图片元素传进去，导致无法获取对应图片的URL。
3. 轮播结构冗余：每个.slideshow都渲染了一套左右按钮，页面会出现多组重复按钮，既不美观也影响交互。

修复步骤 #

1. 修改缩略图的点击事件 #

把缩略图的onclick改为传递当前点击的元素，这样函数能精准拿到用户点击的图片：

<div class="dots" style="border: 0px solid red; width:100%; display:block; position:relative; padding:12px; text-align:center">
@foreach (var item in slideshow) {
<img src="@item.Url" width="150" height="90" style="display:inline-block; cursor:pointer; margin:0 4px;" onclick="currentDiv(this)" />
}
</div>

2. 优化轮播按钮位置（可选但推荐） #

把左右按钮从每个.slideshow里移出来，只保留一组，避免重复渲染：

<section class="background-overlay-container" style="margin: 0; text-align: center; position: relative;">
@foreach (var item in slideshow) {
<div class="slideshow" style="background: url('@item.Url')left center/100% 140% no-repeat !important; display:none;">
<h3 style="position:absolute"></h3>
</div>
}
<!-- 统一放置左右按钮，确保只显示一组 -->
<button class="button-left" onclick="plusDivs(-1)" style="position: absolute; left: 15px; top: 50%; transform: translateY(-50%); z-index:10; cursor:pointer;">&#10094;</button>
<button class="button-right" onclick="plusDivs(1)" style="position: absolute; right: 15px; top: 50%; transform: translateY(-50%); z-index:10; cursor:pointer;">&#10095;</button>
</section>

3. 修复JavaScript代码 #

更新后的JS会复用showDivs函数，让缩略图点击和左右按钮切换逻辑保持一致，同时添加缩略图高亮效果提升体验：

// 获取所有轮播项和缩略图元素
const slides = document.getElementsByClassName("slideshow");
const thumbnails = document.querySelectorAll(".dots img");

function currentDiv(clickedImg) {
    // 找到点击缩略图对应的索引（转成数组才能使用indexOf方法）
    const index = Array.from(thumbnails).indexOf(clickedImg);
    // 调用showDivs切换到对应轮播项（slideIndex从1开始，所以索引+1）
    showDivs(index + 1);
}

let slideIndex = 1;
// 初始化显示第一个轮播项
showDivs(slideIndex);

function plusDivs(n) {
    showDivs(slideIndex += n);
}

function showDivs(n) {
    let i;
    // 修正索引边界，实现循环切换
    if (n > slides.length) { slideIndex = 1 }
    if (n < 1) { slideIndex = slides.length }
    
    // 隐藏所有轮播项
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    // 显示当前选中的轮播项
    slides[slideIndex - 1].style.display = "block";
    
    // 给当前选中的缩略图添加高亮样式（可根据需求修改颜色和样式）
    thumbnails.forEach(thumb => thumb.style.border = "none");
    thumbnails[slideIndex - 1].style.border = "2px solid #4CAF50";
}

修复后的效果 #

• 点击任意缩略图，顶部轮播图会精准切换到对应图片
• 左右按钮的切换功能保持正常，和缩略图点击逻辑统一
• 选中的缩略图会有绿色边框高亮（可自定义样式）
• 页面不再出现重复的左右按钮，结构更简洁

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