html中怎样设置图片轮播

在HTML中，我们经常需要在网页中添加图片轮播的效果。下面介绍一些设置图片轮播的方法。

一、使用CSS动画

/* CSS代码 */
.container{
  width: 500px;
  height: 300px;
  overflow: hidden;
  position: relative;
}
.container img{
  position: absolute;
  top: 0;
  left: 0;
  animation:fade 5s infinite;
}
@keyframes fade{
  0%{
    opacity: 0;
  }
  20%{
    opacity: 1;
  }
  80%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}

二、使用JavaScript的setInterval方法

/* HTML代码 */
<div class="container">
  <img src="1.jpg" alt="">
  <img src="2.jpg" alt="">
  <img src="3.jpg" alt="">
</div>

/* JS代码 */
var imgs = document.getElementsByTagName("img");
var index = 0;
setInterval(function(){
  for(var i = 0; i 

以上就是设置图片轮播的两种方法，大家可以根据自己的需要选择不同的方法。