首页手机端滑动轮播图代码实现

手机端滑动轮播图代码实现

时间: 2024-08-14 19:05:42 浏览: 31

在移动端实现滑动轮播图，通常会利用JavaScript库如Swiper、Slick或Masonry等，配合HTML和CSS来完成。以下是一个简单的基于Swiper库的轮播图代码示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Mobile Slider</title>  <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper.min.css"> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper">  <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div>  </div>  <div class="swiper-pagination"></div> </div> <script src="https://unpkg.com/swiper@8/swiper.min.js"></script> <script> // 初始化Swiper实例 var swiper = new Swiper('.swiper-container', { loop: true, // 循环模式 autoplay: { delay: 3000 }, // 自动播放，延时3秒 pagination: { el: '.swiper-pagination', // 使用分页按钮 }, }); </script> </body> </html> ``` 在这个例子中，`.swiper-container`包含了所有轮播图片，`.swiper-slide`是每个单独的幻灯片，`.swiper-pagination`用于显示当前幻灯片的位置。通过Swiper提供的API，你可以轻松地控制轮播图的滚动。