为移动设备创建简单的纯Javascript滑动条

我想在小屏幕上搜索图像时创建类似于Google slider的东西，只需缩小浏览器宽度或从手机访问，然后在Google搜索框中键入“image”，例如，您将在Google搜索框下看到3幅图像，您可以滑动以显示更多图像

因此，将有大约6个图像彼此相邻，但2个完全显示，第3个图像的一半左右，而其他3个图像将被隐藏

由于用户向左滑动第3个图像，而其他3个图像将变为可见，因此，如果用户已经向左滑动，则应仍然可以向右滑动以显示第一个图像

我试着在Google上分析这个函数，但是有一些元素是我第一次看到的，我不知道如何找到相关的JS函数，如果这是用纯JS完成的话

这就是我迄今为止所尝试的：

var ImageIndex = 0;

function swipe(event){
    var touch = event.targetTouches[0];
    var midpoint = Math.floor(screen.width/2);
    var px = touch.pageX;
    var items = document.getElementsByClassName('image-wrapper');
    var itemActive = items[ImageIndex]; 
    if(px < midpoint){
        itemActive.style.marginLeft = '-100%';
        itemActive.style.transition = '1s';
        if (ImageIndex < items.length) {
            ImageIndex = ImageIndex + 1;
        }else{
            ImageIndex = 0;
        }
    }else{
        itemActive.style.marginLeft = '0px';
        itemActive.style.transition = '1s';
        if (ImageIndex >= 1 ) {
            ImageIndex = ImageIndex - 1;
        }else{
            ImageIndex = 0;
        }
    }
}

HTML:

那么，如何定制代码，使其按照上面提到的那样工作呢

---

我不想使用Jquery或任何库，只想使用纯JS代码。

因此，您的问题是在这种情况下

如果（ImageIndex

。您总共有3个元素，因此当

ImageIndex

为2时，它会将其增加到

3

，并且在html

items[ImageIndex]中有3个图像

将返回未定义

---

因此，将条件更改为

if（ImageIndex

将第一个条件

ImageIndex

替换为

ImageIndex<（items.length-1）

，因为这里的图像总长度为3，并且尝试访问

项[3]

（

未定义的
）

您的最终代码如下所示：

var ImageIndex = 0;

function swipe(event){
    var touch = event.targetTouches[0];
    var midpoint = Math.floor(screen.width/2);
    var px = touch.pageX;
    var items = document.getElementsByClassName('image-wrapper');
    var itemActive = items[ImageIndex]; 
    if(px < midpoint){
        itemActive.style.marginLeft = '-100%';
        itemActive.style.transition = '1s';
        if (ImageIndex < (items.length - 1)) {
            ImageIndex = ImageIndex + 1;
        }else{
            ImageIndex = 0;
        }
    }else{
        itemActive.style.marginLeft = '0px';
        itemActive.style.transition = '1s';
        if (ImageIndex >= 1 ) {
            ImageIndex = ImageIndex - 1;
        }else{
            ImageIndex = items.length - 1;
        }
    }
}

var-ImageIndex=0；
功能滑动（事件）{
var touch=event.targetTouches[0]；
var中点=数学地板（屏幕宽度/2）；
var px=touch.pageX；
var items=document.getElementsByClassName（'image-wrapper'）；
var itemActive=项目[ImageIndex]；
如果（px<中点）{
itemActive.style.marginLeft='-100%'；
itemActive.style.transition='1s'；
如果（图像索引<（items.length-1））{
ImageIndex=ImageIndex+1；
}否则{
ImageIndex=0；
}
}否则{
itemActive.style.marginLeft='0px'；
itemActive.style.transition='1s'；
如果（ImageIndex>=1）{
ImageIndex=ImageIndex-1；
}否则{
ImageIndex=items.length-1；
}
}
}
修复错误的方法是正确的，但是如何实现2个半图像的想法？当用户在初始状态下向左滑动时，需要什么行为。它应该移动到第二个图像或第三个图像？现在有6个图像，我想要以下两种情况中的一种：1-2个图像完全显示，第三个图像的一部分最后3个图像是隐藏的，当用户向左滑动时，第3个图像的隐藏部分将显示，当滑动时，其他3个图像也将显示，并且如果用户向左滑动，他可以再次向右滑动，例如2:3个图像/1个图像显示，用户可以在滑动时滑动以显示其他3个图像hing，当我向左滑动图像时，3个图像容器向左移动
边距：-100%
，因此当我滑动第一个图像时，只有3个图像移到屏幕外，只有主容器
图像gallary
可见感谢我更新了它，你有方法实现问题顶部的想法吗？一个更重要的是，当我向左滑动图像时，3个图像容器向左移动
边距：-100%
，因此当我滑动第一个图像时，只有3个图像被移出屏幕，并且只有主容器
images gallary
可见。对于第二个，您可以为所有图像提供默认css，同时一个图像应该处于活动状态，而不是她将大量使用默认css，如use
translate
。活动图像将可见。我希望始终显示3张6张图像，用户可以左右滑动以显示一张，并隐藏另一张time@maxwell最初，所有3个图像都应该是活动的，所有其他图像都应该是默认的css。根据您的swi添加和删除类向左还是向右
<div class="images-gallary" ontouchmove="swipe(event)">
    <div class="image-wrapper" id="firstItem">
        <img class="image" src="http://placehold.it/73/200">
    </div>
    <div class="image-wrapper" id="secondItem">
        <img class="image" src="http://placehold.it/73/300">
    </div>
    <div class="image-wrapper">
        <img class="image" src="http://placehold.it/73/400">
    </div>
</div> <!-- .images-gallary -->

Uncaught TypeError: Cannot read property 'style' of undefined

if (ImageIndex < (items.length - 1)) {
   ImageIndex = ImageIndex + 1;
}else {
   ImageIndex = 0;
}

if (ImageIndex >= 1 ) {
   ImageIndex = ImageIndex - 1;
}else {
   ImageIndex = items.length-1;
}

var ImageIndex = 0;

function swipe(event){
    var touch = event.targetTouches[0];
    var midpoint = Math.floor(screen.width/2);
    var px = touch.pageX;
    var items = document.getElementsByClassName('image-wrapper');
    var itemActive = items[ImageIndex]; 
    if(px < midpoint){
        itemActive.style.marginLeft = '-100%';
        itemActive.style.transition = '1s';
        if (ImageIndex < (items.length - 1)) {
            ImageIndex = ImageIndex + 1;
        }else{
            ImageIndex = 0;
        }
    }else{
        itemActive.style.marginLeft = '0px';
        itemActive.style.transition = '1s';
        if (ImageIndex >= 1 ) {
            ImageIndex = ImageIndex - 1;
        }else{
            ImageIndex = items.length - 1;
        }
    }
}