javascript - MVC 5 中的图像 slider

Question

我正在开发 MVC 5 应用程序，我想在 2 秒的时间间隔内显示所有相关图像。图像路径存储在数据库中。我知道我可以使用 setInterval javascript 函数来实现同样的目的。我可以循环浏览前两个图像(索引是硬编码的)，但是想要逐个显示所有图像

下面是我的 jquery。请让我知道如何动态设置索引

$(document).ready(function () {
        var curImg = 0; 
        setInterval(function () {
             var path = '@Model.lstImage[1].image_path'
             $('#memImg').attr("src",path); 

        }, 2000);

Answer 1

您需要首先从模型创建图像链接数组，然后在设置的时间间隔内使用它。使用这个逻辑。

将其置于您的 View 中。

@{
  var imageLinks = @Model.lstImage.Select(x => x.image_path).ToList();
}

现在我们有了imageLinks列表。让我们在 Jquery 中使用它

在脚本中添加此逻辑

   var imageArray =  @Html.Raw(Json.Encode(imageLinks)); // assign the c# variable data into jquery variable.

    $(document).ready(function () {
        var curImg = 0; 
        var index = 0;
        setInterval(function () {
             if(index > imageArray.length){
                 index = 0;  // set back index to zero when the last index is reached.
             }
             var path = imageArray[index];
             $('#memImg').attr("src",path); 
             index++; //increment the index for next image display.
        }, 2000);
    });