移动设备滑动时使用纯Javascript滑块_Javascript_Css_Html_Slider

移动设备滑动时使用纯Javascript滑块

javascript css html

移动设备滑动时使用纯Javascript滑块,javascript,css,html,slider,Javascript,Css,Html,Slider,我有大约6个图像，我想在手机上创建一个滑块，仅用于小屏幕我搜索了一下，大部分答案都是一些库和Jquery，但我希望它是纯Javascript的，没有任何库我创建了一个我尝试过的东西，这是一个非常简单的片段，在滑动时将第一个图像向左移动，然后将其移回以前的位置：代码如下： Js代码： CSS: HTML: 理想情况下，我想要的是3个相邻的图像和另外3个隐藏图像，用户可以向左滑动以查看左侧的隐藏图像，然后向右滑动以显示右侧隐藏的图像就像移动搜索上的谷歌网站一样，只需缩小浏览器宽度或从移动

我有大约6个图像，我想在手机上创建一个滑块，仅用于小屏幕

我搜索了一下，大部分答案都是一些库和Jquery，但我希望它是纯Javascript的，没有任何库

我创建了一个我尝试过的东西，这是一个非常简单的片段，在滑动时将第一个图像向左移动，然后将其移回以前的位置：

代码如下： Js代码：

CSS:

HTML:

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

就像移动搜索上的谷歌网站一样，只需缩小浏览器宽度或从移动设备访问，然后搜索“图像”，例如，你会在谷歌搜索框下看到3幅图像，你可以滑动以显示更多图像

如何实现这一点？

访问当前活动幻灯片并相应添加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>


文件
.英勇的形象{
溢出：隐藏；
高度：73px；
空白：nowrap；
}
.图像包装器{
宽度：100%；
显示：内联块；
文本对齐：居中；
}
#第一项{
背景：#a8a8a8；
}
#第二项{
背景：#c8c8c8；
}
#三十年代{
背景#d8d8d8；
}
左边
正确的
var指数=0；
功能滑动（事件、方向）{
var中点=数学地板（屏幕宽度/2）；
var px=event.pageX；
var items=document.getElementsByClassName（'image-wrapper'）；
var itemActive=项目[ImageIndex]；
如果（方向=='左'）{
itemActive.style.marginLeft='-100%'；
itemActive.style.transition='1s'；
ImageIndex=ImageIndex=1？ImageIndex-1:0；
}
}

刷卡时是否显示一张图像，是不是在向相反方向滑动后恢复了以前的图像？@maxwell在这里查看：

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

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

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