0

我想将一些图像显示为视图中的幻灯片放映（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 将图像显示为幻灯片。

4

2 回答 2

2

首先在模型中创建这个类

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; }
    }
}

然后在控制器中使用以下代码

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);
}

这段代码是我从我身边尝试过的工作代码。希望对您有所帮助。在图像路径中指定完整路径说文件所在的物理路径

于 2013-11-18T13:59:59.487 回答
1 
foreach(var item in Model.Imagepath) 
{ 
<img src=item alt="Sample Image" width="300px" /> 
}

...或者...

您应该使视图使用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" /> 
    }

注意：这是手写的，所以检查语法。

于 2013-11-04T14:02:21.097 回答