<!DOCTYPE html> <html> <head> <title>html轮播图代码</title> <style> /* 样式表 */ .slideshow-container { position: relative; max-width: 100%; margin: auto; } .mySlides { display: none; width: 100%; padding: 80px 0; } /* 轮播图样式 */ .fade { -webkit-animation: fade 5s infinite; /* Safari */ animation: fade 5s infinite; } @-webkit-keyframes fade { 0%, 100% {opacity: 0} 25%, 75% {opacity: 1} } @keyframes fade { 0%, 100% {opacity: 0} 12.5%, 87.5% {opacity: 1} } </style> </head> <body> <div class="slideshow-container"> <div class="mySlides fade"> <img src="image1.jpg" style="width:100%"> </div> <div class="mySlides fade"> <img src="image2.jpg" style="width:100%"> </div> <div class="mySlides fade"> <img src="image3.jpg" style="width:100%"> </div> </div> </body> </html>
这段代码创建了一个简单的轮播图,其中包含三张图片,图片的来源需要替换为实际的图片URL,样式部分使用了CSS动画,使得图片以渐变的方式显示,你可以根据需要调整样式和图片。
发表评论