支持手机触屏滑动的js图片幻灯片特效代码

要实现一个支持手机触屏滑动的JavaScript图片幻灯片特效，可以使用一些现成的库，比如Swiper.js。以下是一个简单的示例代码，展示了如何使用Swiper.js来创建一个响应式的图片幻灯片，并且支持触屏滑动。

基础概念

Swiper.js: 一个现代的触摸滑动库，用于创建响应式的滑动组件。
触屏滑动: 利用手机的触摸屏功能进行滑动操作。

优势

响应式设计: 自动适应不同屏幕尺寸。
丰富的API: 提供多种配置选项和回调函数。
良好的兼容性: 支持多种浏览器和设备。

类型

水平滑动: 图片从左到右或从右到左滑动。
垂直滑动: 图片从上到下或从下到上滑动。
无限循环: 图片可以无限循环播放。

应用场景

网站首页: 用于展示重要信息或产品。
电商网站: 展示商品图片。
新闻网站: 滚动显示最新新闻。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Touch Slider</title>
    <!-- 引入Swiper CSS -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <style>
        .swiper-container {
            width: 100%;
            height: 300px;
        }
        .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="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>
        <!-- 分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

    <!-- 引入Swiper JS -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script>
        var swiper = new Swiper('.swiper-container', {
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            // 启用触屏滑动
            touchEventsTarget: 'container',
            simulateTouch: true,
        });
    </script>
</body>
</html>