Question

我想为移动设备创建一个大约6张图像，仅适用于小屏幕。

我进行了搜索，大多数答案是一些库和Jquery，但是我希望它使用纯Javascript而没有任何库。

我创建了自己尝试过的小提琴，这是一个非常简单的代码段，可将第一个图像滑动到左侧，然后将其移回到先前的位置：http://jsfiddle.net/dkmp5h1L/3/

这是代码： js代码：

function swipe(event){
    var midpoint = Math.floor(screen.width/2),
        touch = event.targetTouches[0],
        px = touch.pageX,
        firstItem = document.getElementById('firstItem'); 
    if(px > midpoint){
        firstItem.style.marginLeft = '-100%';
        firstItem.style.transition = '1s ';
    }else{
        firstItem.style.marginLeft = '0';
        firstItem.style.transition = '1s ';          
    }
}

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

因此，理想情况下，我想要的是彼此相邻的3张图像和另外3张隐藏的图像，用户可以向左滑动以查看左侧的隐藏图像，然后向右滑动以显示那些已隐藏的图像。是的。

就像在移动设备上搜索Google网站一样，只需缩小浏览器的宽度或从移动设备上访问它，然后搜索“图片”，例如，您将在Google搜索框下方看到3张图片，您可以滑动它们以显示更多图片

如何实现？

Answer 1

可以访问当前的活动幻灯片并相应地添加CSS。我尝试了一个示例代码，它似乎正在工作。检查一下。

        <!DOCTYPE html>
            <html lang="en">
                <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
    .images-gallary{
        overflow: hidden;
        height: 73px;
        white-space: nowrap;
    }

    .image-wrapper{
        width: 100%;
        display: inline-block;
        text-align: center;
    }
    #firstItem {
        background: #a8a8a8;
    }
    #secondItem{
        background: #c8c8c8;
    }
    #thirdItem{
        background: #d8d8d8;
    }
</style>
</head>
<body>
<div class="images-gallary">
  <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" id="thirdItem">
    <img class="image" src="http://placehold.it/73/400" />
  </div>
</div>
<button onClick="swipe(event, 'left')">left</button>
<button onClick="swipe(event, 'right')">right</button>
<script>
        var ImageIndex = 0;
        function swipe(event, direction){
            var midpoint = Math.floor(screen.width/2);
            var px = event.pageX;
            var items = document.getElementsByClassName('image-wrapper');
            var itemActive = items[ImageIndex]; 
            if (direction === 'left') {
                itemActive.style.marginLeft = '-100%';
                itemActive.style.transition = '1s ';
                ImageIndex = ImageIndex < items.length - 1 ? ImageIndex + 1 : ImageIndex;
            }else{
                itemActive.style.marginLeft = '0';
                itemActive.style.transition = '1s ';
                ImageIndex = ImageIndex >= 1 ? ImageIndex - 1 : 0;
            }
        }
</script>

滑动即可使用纯Javascript滑块移动

1 个答案: