摘要 :
以下是一个使用Swiper插件实现的完整的网页轮播图功能，图片宽度设置为100%，高度设置为600像素，图片数量为5张，每隔10秒轮播一次。 HTML代码： <!DOCTYPE html……
以下是一个使用Swiper插件实现的完整的网页轮播图功能，图片宽度设置为100%，高度设置为600像素，图片数量为5张，每隔10秒轮播一次。
HTML代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网页轮播图</title> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="image1.jpg" alt="Image 1"></div> <div class="swiper-slide"><img src="image2.jpg" alt="Image 2"></div> <div class="swiper-slide"><img src="image3.jpg" alt="Image 3"></div> <div class="swiper-slide"><img src="image4.jpg" alt="Image 4"></div> <div class="swiper-slide"><img src="image5.jpg" alt="Image 5"></div> </div> <!-- 如果需要分页器，可以添加以下代码 --> <!-- <div class="swiper-pagination"></div> --> </div> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> <script src="script.js"></script> </body> </html>
CSS代码：
.swiper-container {
width: 100%;
height: 600px;
margin: 0 auto;
}
.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
JavaScript代码（保存为script.js文件）：
var swiper = new Swiper('.swiper-container', {
slidesPerView: 1, // 显示在容器中的幻灯片数量，默认为1
spaceBetween: 10, // 幻灯片之间的间隔（以像素为单位），默认为0
loop: true, // 无限循环播放，默认为false
autoplay: { // 自动播放
delay: 10000, // 每隔10秒轮播一次，可以根据需要修改
disableOnInteraction: false, // 当用户与轮播图交互时暂停自动播放，默认为true
},
});
在这个示例中，我们使用了Swiper插件的自动播放功能，每隔10秒自动播放下一张图片。同时，我们将轮播图容器设置为宽度100%，高度600像素，并使用CSS将图片的宽度设置为100%，高度设置为100%，使图片保持原始比例。如果需要添加分页器，可以在容器中添加Swiper插件提供的分页器组件，并通过JavaScript API进行配置。
还没有评论呢，快来抢沙发~