首页可左右滑动切换得图文互动html代码

可左右滑动切换得图文互动html代码

时间: 2024-10-11 13:10:50 浏览: 44

实现左右滑动切换的图文互动效果，通常需要结合HTML、CSS和JavaScript（例如Swiper.js等库）。以下是基本的代码框架： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="swiper.min.css"> <script src="swiper.min.js"></script> <style> .swiper-container { width: 100%; height: 400px; overflow: hidden; } .swiper-slide { text-align: center; font-size: 18px; background-color: #f8f9fa; display: flex; justify-content: center; align-items: center; } </style> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide active" data-title="Slide 1"> <img src="image1.jpg" alt="Slide 1 Image"> <h2>标题1</h2> </div> <div class="swiper-slide" data-title="Slide 2"> <img src="image2.jpg" alt="Slide 2 Image"> <h2>标题2</h2> </div>  </div> <div class="swiper-pagination"></div> </div> <script> var swiper = new Swiper('.swiper-container', { direction: 'horizontal', slidesPerView: 1, pagination: { el: '.swiper-pagination', clickable: true }, on: { slideChangeStart: function() { var currentSlideTitle = this.slides[this.activeIndex].dataset.title; console.log('即将切换到:', currentSlideTitle); } } }); </script> </body> </html> ``` 这个代码创建了一个带有多张图片的滑动容器，每张图片都有标题。使用Swiper.js库实现了左右滑动的效果，并设置了滑动开始时的事件监听器，用于获取即将切换的图片标题。

阅读全文