Question

我想为图片制作幻灯片

<div class="images">
 <img id="img1" src="~/Images/1.jpg"  />
 <img id="img2" src="~/Images/2.jpg" />
 <img id="img3" src="~/Images/3.jpg" />
 <img id="img4" src="~/Images/4.jpg" />
 </div>

Answer 1

您必须编写JavaScript代码才能执行此操作。

但是互联网上有大量可以使用的幻灯片脚本。

在这里您可以找到一些有用的评论： http://designscrazed.org/free-responsive-jquery-image-sliders/

Answer 2

您还可以制作一个简单的CSS动画来显示图像的幻灯片，如下所示：

<div class="container">
  <img class='s_img'   src="~/Images/1.jpg" />
  <img class='s_img'   src="~/Images/2.jpg" />
  <img class='s_img'   src="~/Images/3.jpg" />
  <img class='s_img'   src="~/Images/4.jpg" />    
</div>

CSS代码：

.container
{
  margin:70px auto;
  width:400px;
  height:300px;
  overflow:hidden;
  position:relative;    
}
.s_img
{
  position:absolute;
  animation:an1 16s infinite;
  opacity:0;      
}
@keyframes an1
{   
  25%{opacity:1;}
  40%{opacity:0;}
}     
img:nth-child(4){animation-delay:0s;}
img:nth-child(3){animation-delay:4s;}
img:nth-child(2){animation-delay:8s;}
img:nth-child(1){animation-delay:12s;}

Answer 3

微软有一个很好的例子。请在此处查看http://msdn.microsoft.com/en-us/library/ie/hh920769%28v=vs.85%29.aspx

如何在html中滑动显示图像

3 个答案: