<head>
<style>
.w3-animate-fading{animation:fading 5s infinite}
@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
</style>
</head>
<body>
<div >
<img class="mySlides w3-animate-fading" src="1.jpg" style="width:100%;height:400px">
<img class="mySlides w3-animate-fading" src="2.jpg" style="width:100%;height:400px">
<img class="mySlides w3-animate-fading" src="3.jpg" style="width:100%;height:400px">
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 5000);
}
</script>
</body>
No comments:
Post a Comment