js实现手机web图片左右滑动效果

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代码自己实现图片左右滑动效果，可以按以下步骤操作：

1. 在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>

1. 使用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;
}

1. 使用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);

1. 实现手指事件的处理函数

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';
}

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

示例说明

以下是两个实际场景的示例说明：

示例一

你正在为一家在线美食杂志拍摄照片，需要在网站上展示这些照片。为了增强用户的浏览体验，你决定使用左右滑动的效果展示这些照片。你可以使用swiper插件，在网站上实现一个美观的轮播图效果，让用户在浏览照片时更加流畅自如。

示例二

你正在为一个在线购物网站设计手机版的页面。根据你的页面分析报告，你发现用户往往在浏览商品图片时会因为页面布局不太理想而体验不佳。为了提高用户浏览商品图片的效率，你决定在手机版页面中使用原生JS实现图片左右滑动效果，以方便用户在滑动屏幕时查看多张商品图片。