JS实现手机web图片左右滑动效果攻略

实现手机web图片左右滑动效果，可以使用现成的JS插件，如swiper。同时，也可以使用原生JS代码自己实现左右滑动的效果。

方案一：使用swiper插件

swiper是一个现成的JS插件，它可以实现各种各样的轮播图效果，包括手机web图片左右滑动效果。使用swiper实现图片左右滑动效果，需要在头部引入swiper库：

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

然后在HTML中，使用以下代码创建swiper容器和包含图片的slide：

<div class="swiper-container">
   <div class="swiper-wrapper">
       <div class="swiper-slide"><img src="image1.jpg"></div>
       <div class="swiper-slide"><img src="image2.jpg"></div>
       <div class="swiper-slide"><img src="image3.jpg"></div>
       ...
   </div>
   <div class="swiper-pagination"></div>
</div>

接下来，使用以下JS代码初始化swiper实例：

var swiper = new Swiper('.swiper-container', {
    pagination: {
        el: '.swiper-pagination',
    },
});

至此，一个图片左右滑动的效果就实现完成了。

在实际开发中，可以根据swiper的配置选项，对swiper进行更加个性化的设置。

方案二：使用原生JS代码自己实现

如果你想要使用原生JS代码自己实现图片左右滑动效果，可以按以下步骤操作：

在HTML中创建包含图片的容器

<div id="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="image1.jpg"></div>
        <div class="swiper-slide"><img src="image2.jpg"></div>
        <div class="swiper-slide"><img src="image3.jpg"></div>
        ...
    </div>
</div>

使用CSS样式设置图片容器的宽度和高度以及子元素的样式

#swiper {
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.swiper-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    transition: transform .5s;
}

.swiper-slide {
    width: 100%;
    height: inherit;
}

使用JS代码获取元素并注册手指事件

// 获取元素
var swiper = document.querySelector('#swiper');
var wrapper = document.querySelector('.swiper-wrapper');
var slides = document.querySelectorAll('.swiper-slide');
var len = slides.length;

// 注册手指事件
swiper.addEventListener('touchstart', touchStart, false);
swiper.addEventListener('touchmove', touchMove, false);
swiper.addEventListener('touchend', touchEnd, false);

实现手指事件的处理函数

var startX = 0;
var startY = 0;
var endX = 0;
var endY = 0;
var offX = 0;
var offY = 0;
var index = 0;
var isMoving = false;

// touchStart
function touchStart(e) {
    startX = e.touches[0].clientX;
    startY = e.touches[0].clientY;
}

// touchMove
function touchMove(e) {
    endX = e.touches[0].clientX;
    endY = e.touches[0].clientY;
    offX = endX - startX;
    offY = endY - startY;
    if (Math.abs(offX) > Math.abs(offY)) {
        e.preventDefault();
        isMoving = true;
        setTransition(false);
        setTranslate(index * clientWidth + offX, 0);
    }
}

// touchEnd
function touchEnd(e) {
    if (isMoving) {
        isMoving = false;
        if (Math.abs(offX) <= clientWidth / 2) {
            setTransition(true);
            setTranslate(index * clientWidth + 0, 0);
        } else {
            if (offX > 0) {
                index--;
                if (index < 0) index = 0;
            } else {
                index++;
                if (index > len - 1) index = len - 1;
            }
            setTransition(true);
            setTranslate(index * clientWidth, 0);
        }
    }
}

function setTranslate(x, y) {
    wrapper.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0)';
}

function setTransition(flag) {
    wrapper.style.transition = flag ? 'transform .5s' : 'none';
}

至此，我们就成功实现了一个图片左右滑动效果的功能。