Question

我想在视图中以幻灯片形式显示一些图像（ MVC4 ）。

我将这些图像的物理路径转换为控制中的一个数组[]。我希望传递该数组来查看。我希望将这些图像显示为幻灯片。

控制器：

String[] ImagePath = { "D:\\Large\\1.jpg", "D:\\Large\\4.jpg", D:\\Large\\5.jpg", "D:\\Large\\6.jpg", "D:\\Large\\7.jpg" };
        return View(ImagePath);

查看：

foreach(var item in Imagepath)
{
<img src=@ImagePath alt="Sample Image" width="300px" />
}

但它没有显示出来。

是否可以使用mvc4以幻灯片形式显示图像。

Answer 1

首先在模型

中创建此类

public class ImageModel
{
List<string> _images = new List<string>();

    public ImageModel()
    {
        _images = new List<string>();
    }

    public List<string> Images
    {
        get { return _images; }
        set { _images = value; }
    }
}

然后在Controller中使用以下代码

var imageFiles = new ProjectName.Models.ImageModel();
imageFiles.Images.AddRange(System.IO.Directory.GetFiles(imagepath));
return View(imageFiles);

在视图中

将其用作

@model ImageModel
<div id="container">
<div class="photobanner">
    @for (int imgIndex = 0; imgIndex < Model.Images.Count; imgIndex++)
    {
        if (imgIndex == 0)
        {
          <img class="first" src = "@Model.Images[imgIndex]" alt="No Image" style="max-height: 110px; "/>  
        }
        else
        {
                <img src = "@Model.Images[imgIndex]" alt="No Image" style="max-height: 110px; "/> 
        }
    }
 </div>

你必须将css应用为

/*photobanner*/

.photobanner {
height: 233px;
width: 3550px;
margin-bottom: 80px;
}

/*keyframe animations*/
.first {
-webkit-animation: bannermove 30s linear infinite;
   -moz-animation: bannermove 30s linear infinite;
    -ms-animation: bannermove 30s linear infinite;
     -o-animation: bannermove 30s linear infinite;
        animation: bannermove 30s linear infinite;
}

@keyframes "bannermove" {
 0% {
    margin-left: 0px;
    }
 100% {
    margin-left: -2125px;
   }
 }

 @-moz-keyframes bannermove {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -2125px;
  }
 }

 @-webkit-keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -2125px;
  }
 }

 @-ms-keyframes "bannermove" {
  0% {
  margin-left: 0px;
  }
  100% {
   margin-left: -2125px;
  }
 }

 @-o-keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -2125px;
  }
 }

.photobanner {
height: 233px;
width: 3550px;
margin-bottom: 80px;
}

.photobanner img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.photobanner img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
cursor: pointer;

-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}

这段代码是我试过的代码。希望它对您有所帮助。在图像路径中，指定完整路径，指出文件所在的物理路径

Answer 2

foreach(var item in Model.Imagepath) 
{ 
<img src=item alt="Sample Image" width="300px" /> 
}

... ... OR

您应该使视图使用IEnumerable，然后使用控制器......

List<string> images = new List<string>();
images.Add("D:\\Large\\1.jpg");
images.Add("D:\\Large\\2.jpg");
etc...

return View(images);

foreach(var item in Model) 
    { 
    <img src=item alt="Sample Image" width="300px" /> 
    }

注意：这是手写的，因此请检查语法。

在mvc4中以幻灯片形式显示图像

2 个答案: