当前位置: 动力学知识库 > 问答 > 编程问答 >

How to SlideShow the Images in html

问题描述:

I want to make slide show for images

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

网友答案:

You have to write JavaScript code for doing that.

But there a tons of slideshow scripts on the internet you can use on of them.

Here you can find some useful reviews: http://designscrazed.org/free-responsive-jquery-image-sliders/

网友答案:

Microsoft has a nice example for that. Check it out here http://msdn.microsoft.com/en-us/library/ie/hh920769%28v=vs.85%29.aspx

网友答案:

You can also make a simple CSS animation to display a slideshow of the images as below:

<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 code :

.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;}
分享给朋友:
您可能感兴趣的文章:
随机阅读: