Question

我想为小尺寸屏幕上的图像创建类似于Google滑块的图像，只需缩小浏览器宽度或从移动设备访问它，然后在Google搜索框中输入“图像”，例如，您将看到3张图像您可以在Google搜索框下方滑动以显示更多图像。

因此，大约有6张图像彼此相邻，但是充分显示了2张图像，而大约有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;
        }
    }
}

CSS：

.images-gallary{
    background-color: #000;
    overflow: hidden;
    height: 73px;
    white-space: nowrap;
}

.image-wrapper{
    width: 100%;
    display: inline-block;
    text-align: center;
}

#secondItem{
    background: #fff;
}

HTML：

<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 -->

此代码仅滑动了前2张图像，但出现错误：

Uncaught TypeError: Cannot read property 'style' of undefined

那么如何像上面提到的那样自定义代码以使其正常工作？

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

Answer 1

因此，您遇到的问题是在这种情况下if (ImageIndex < items.length) {。您总共有3个元素，因此，当ImageIndex为2时，它将增加到3，并且由于html items[ImageIndex]中有3个图像，将返回未定义。

因此将条件更改为if (ImageIndex < items.length - 1) {。

Answer 2

用ImageIndex < items.length替换第一个条件ImageIndex < (items.length - 1)，因为此处的图像总长度为3，并尝试访问items[3]（undefined）的样式

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

在第二种情况下还有另一件事，在其他情况下应将ImageIndex = 0;替换为ImageIndex = items.length - 1;，因为在ImageIndex = 0;和{{1的情况下，总是初始化相同的值px > midpoint }}

ImageIndex < 1

您的最终代码如下：

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

在滑动式移动设备上创建简单的纯Javascript滑块

2 个答案: