Javascript 如何使用滑块中的图像显示图像标题

我想在图像滑块中的每个图像下显示图像标题

但现在我的问题是，所有的图像标题都显示在每一幅图像上，就像这样

视图：

  <div class="grid-11 left">
        @if (Model.Photos.Count > 0)
        {

            <div style="padding:10px">
                <div class="slide-content" style="max-width:800px">
                    @foreach (var photos in Model.Photos)
                    {
                        <div>
                            <img class="mySlides" src="@Url.Content(photos.photo_url)"/>

                        </div>
                        <span>@photos.photo_caption</span>
                    }
                    <div class="w3-center">
                        <div class="w3-section">
                            <button class="w3-button w3-light-grey" onclick="plusDivs(-1)">❮ </button>
                            <button class="w3-button w3-light-grey" onclick="plusDivs(1)"> ❯</button>
                        </div>
                    </div>
                </div>
             </div>
        }
    </div>

@如果（Model.Photos.Count>0）
{
@foreach（模型中的var照片。照片）
{
@photos.photo_说明
}
❮ 
❯
}

脚本：

   var slideIndex = 1;
    showDivs(slideIndex);

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

    function currentDiv(n) {
        showDivs(slideIndex = n);
    }

    function showDivs(n) {
        var i;
        var x = document.getElementsByClassName("mySlides");
        if (n > x.length) {
            slideIndex = 1
        }
        if (n < 1) {
            slideIndex = x.length
        }
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        x[slideIndex - 1].style.display = "block";
    }

var slideIndex=1；
showDivs（slideIndex）；
函数plusDivs（n）{
showDivs（slideIndex+=n）；
}
函数currentDiv（n）{
showDivs（slideIndex=n）；
}
函数showDivs（n）{
var i；
var x=document.getElementsByClassName（“mySlides”）；
如果（n>x.length）{
slideIndex=1
}
if（n<1）{
slideIndex=x.length
}
对于（i=0；i

---

如何通过传递图像\u id来显示每个图像的标题？

问题是您通过

class=“mySlides”

只针对显示块/无。您需要将图像和标题包装在某种容器中，并将其作为目标

@foreach (var photos in Model.Photos)
{
    <div class="mySlides">
        <div>
            <img src="@Url.Content(photos.photo_url)"/>
        </div>
        <span>@photos.photo_caption</span>
    </div>
}

@foreach（Model.photos中的var照片）
{
@photos.photo_说明
}