html的开始标签加入属性，html和css做循环照片

接下来，我们需要使用CSS来控制这些图片的显示效果。代码如下所示：

```css

.slideshow-container {

position: relative;

margin: auto;

height: 400px;

}

.mySlides {

display: none;

}

.fade {

animation-name: fade;

animation-duration: 1.5s;

}

@keyframes fade {

from {

opacity: .4

}

to {

opacity: 1

}

}

```

首先，我们定义了一个```slideshow-container```类，用于控制轮播图片的显示区域。其中，```position: relative```用于定义该容器为相对定位，```margin: auto```用于将容器水平居中，```height: 400px```则用于设置容器的高度。

接着，我们又定义了一个```mySlides```类，并设置该类的```display```属性为```none```，这样就可以将轮播图片隐藏起来。

最后，我们定义了一个```fade```类，并使用```animation```属性及```@keyframes```动画来实现轮播效果。其中，```animation-name```用于指定动画名称，而```animation-duration```则用于设置动画持续时间。在```@keyframes```中我们定义了一个```fade```动画，当图片从初始透明度```0.4```淡入到最终透明度```1```时，就会运行这个动画。

最后，我们只需要添加一些JavaScript代码来实现图片的循环即可。代码如下所示：

```javascript

var slideIndex = 0;

showSlides();

function showSlides() {

var i;

var slides = document.getElementsByClassName("mySlides");

for (i = 0; i < slides.length; i++) {

slides[i].style.display = "none";

}

slideIndex++;

if (slideIndex > slides.length) {slideIndex = 1}

slides[slideIndex-1].style.display = "block";

setTimeout(showSlides, 4000);

}

```

在上面的代码中，首先定义了一个计数器```slideIndex```，并且使用了```showSlides()```函数来控制图片的循环。在函数中，我们使用了```getElementsByClassName()```方法来获取所有的轮播图片。接着，我们把所有的图片都隐藏起来，并将计数器加上1。如果计数器超过了图片数量，则重新开始从第一张图片循环。最后，我们再重新显示当前图片，并设置函数执行间隔为```4000```毫秒，即4秒钟。

好了，现在你终于学会了如何使用HTML和CSS来做循环照片啦！赶紧拿起键盘试一试吧，相信你一定能够轻松做出漂亮的图片轮播效果！ 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.ynyuzhu.com/