<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手机端图片幻灯片</title>
<!-- 引入 Swiper CSS 文件 -->
<link rel="stylesheet" href="__STATIC__/css/swiper.min.css">
<style>
/* 设置 Swiper 容器的宽高，图片大小为 460x340 像素 */
.swiper-container {
width: 100%;
max-width: 460px;
height: 340px;
margin: 0 auto;
}
.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover; /* 确保图片按比例填充 */
}
</style>
</head>
<body>
<!-- Swiper 结构 -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="/uploads/01.jpg" title="Image 1"></div>
<div class="swiper-slide"><img src="/uploads/02.jpg" title="Image 2"></div>
<div class="swiper-slide"><img src="/uploads/03.jpg" title="Image 3"></div>
<div class="swiper-slide"><img src="/uploads/04.jpg" title="Image 4"></div>
</div>
<!-- 分页器 -->
<div class="swiper-pagination"></div>
</div>
<!-- 引入 Swiper JS 文件 -->
<script src="__STATIC__/js/swiper.min.js"></script>
<script>
// 初始化 Swiper
var mySwiper = new Swiper('.swiper-container', {
autoplay: {
delay: 5000, // 每张图片停留时间为 5 秒
disableOnInteraction: false // 用户操作后仍然继续自动切换
},
speed: 5000, // 切换动画持续时间为 1 秒
loop: true, // 循环播放
slidesPerView: 1, // 每次只显示一张图片
pagination: '.swiper-pagination', // 启用分页器
paginationClickable: true // 允许点击分页器进行切换
});
</script>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
