如何从服务器上的文件夹中设置图像SRC并使用JavaScript，C#制作幻灯片

本文关键字：JavaScript 幻灯片 SRC 图像 服务器 设置 文件夹 | 更新日期: 2023-09-27 17:56:22

我正在尝试动态设置图像 src，但我不知道如何在运行时设置图像 src。我正在建立一个旅游网站，并有多个文件夹用于住宿图像。我在数据库中保存了路径，想要一个运行时幻灯片。请帮助我，这是我的代码

<h2 class="w3-center"> Slideshow</h2>
    <div class="w3-content" style="max-width:800px;position:relative">
        <img class="mySlides" src="Images/page.jpeg" style="width:100%">
        <img class="mySlides" src="slideshow-housing/large/kimba/2.jpg" style="width:100%">
        <img class="mySlides" src="slideshow-housing/large/kimba/1.jpg" style="width:100%">
        <!-- Controls -->
        <a class='left carousel-control' href='#carousel-custom' data-slide='prev'onclick="plusDivs(-1)">
            <span class='glyphicon glyphicon-chevron-left'></span>
        </a>
        <a class='right carousel-control' href='#carousel-custom' data-slide='next'onclick="plusDivs(1)">
            <span class='glyphicon glyphicon-chevron-right'></span>
        </a>
    </div> 
    <script>
         var myHidden = document.getElementById("<%:strPath.ClientID%>");
         var slideIndex = 1;
         showDivs(slideIndex);
         function plusDivs(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";
        }
    </script>

服务器端代码 

string path = accom.SlideShow;
string strPath = "~/" + path;
string[] filesindirectory = System.IO.Directory.GetFiles(Server.MapPath(strPath));
List<String> images = new List<string>(filesindirectory.Count());
foreach (string item in filesindirectory)
{
    images.Add(String.Format("~/Images/{0}", System.IO.Path.GetFileName(item)));
}

如何从服务器上的文件夹中设置图像SRC并使用JavaScript，C#制作幻灯片

您可以设置元素 src 属性，如下所示：

$("#element").attr("src", "your.url");

注意：如果您使用的是 jquery

相关文章：