轮播图是一种常见的网页设计元素,它能够展示一系列的图片,并通过切换图片的方式实现动态效果,在JavaScript中,我们可以使用简单的代码实现轮播图的左右切换,下面是一个简单的示例代码,可以帮助你快速上手。
HTML代码:
<div class="slider"> <div class="slide-track"> <div class="slide"> <img src="image1.jpg" alt="Image 1"> </div> <div class="slide"> <img src="image2.jpg" alt="Image 2"> </div> <div class="slide"> <img src="image3.jpg" alt="Image 3"> </div> </div> </div>
CSS代码:
.slider { width: 500px; height: 300px; overflow: hidden; } .slide-track { width: calc(33.33% - 50px); display: flex; animation: scroll 10s linear infinite; } .slide { width: 100%; height: 100%; }
JavaScript代码:
var slides = document.querySelectorAll('.slide'); var currentSlide = 0; var slideInterval = setInterval(nextSlide, 3000); // 切换时间间隔为3秒 function nextSlide() { slides[currentSlide].style.transform = 'translateX(-33.33%)'; // 左右切换效果 currentSlide = (currentSlide + 1) % slides.length; // 循环切换到最后一张图片,实现无限循环效果 }
发表评论