Transition 实现轮播图

最新推荐文章于 2022-05-12 22:01:39 发布

weixin_33778544

最新推荐文章于 2022-05-12 22:01:39 发布

阅读量941

点赞数 1

文章标签： javascript 前端 ViewUI

原文链接：https://segmentfault.com/a/1190000008277900

版权

关于轮播图的实现算是前端的一个基础，其实实现起来是很简单，这里把实现的基本思路总结一下。
轮播图的实现方案有很多种方式，可以用纯js来实现，也可用css来实现，我们这里主要用到了css3的过渡(transition)以及转换(transform),二者结合实现图片的匀速移动。虽然实现方式有很多，但是基本的html结构却是一样的。

<body>
    <div class="slide">
      <div id="content">
        <img src="./image1.jpg" class="image1" />
        <img src="./image2.jpg" />
        <img src="./image3.jpg" />
      </div>
      <div id="barWrap">
        <div class="leftBar" id="leftBar"></div>
        <div class="rightBar" id="rightBar"></div>
      </div>
    </div>
  </body>

然后设置slide的宽度为图片宽度并居中，将content元素宽度设置为所有图片的总宽度，使图片能够排列在同一行，同时给slide设置overflow: hidden将超出的部分隐藏，这样我们就只能看到一张图片了，具体的css如下

<style>
      .slide {
        width: 300px;
        margin: 0 auto;
        overflow: hidden;
        position: relative;        
      }
      #content {
        width: 1000px;
        transition: transform 1s;  
      }
      img {
        width: 300px;
        height: 100px;
      }
      .leftBar {
        position: absolute;
        top: 35px;
      }
      .leftBar:before {
        content: '\23EA';
        display: block;
        font-size: 30px;
      }
      .rightBar:after {
        content: '\23E9';
        display: block;
        font-size: 30px;
      }
      .rightBar {
        position: absolute;
        top: 35px;
        right: 0px;
      }
    </style>

我们用js来控制轮播的开始以及上一张或者下一张操作

<script>
    var leftDistance = 0
    var totalDistance = 600
    var content = document.getElementById('content')
    var barWrap = document.getElementById('barWrap')
    var timer = null

    barWrap.addEventListener('click', function(e) {
      window.clearInterval(timer)
      if (e.target.id==='leftBar') {
        if (leftDistance === totalDistance) {
          leftDistance = -300
        }
        leftDistance += 300
      } else if (e.target.id === 'rightBar') {
        if (leftDistance === 0) {
          leftDistance = 900
        }
        leftDistance -= 300
      }
      content.style.transform = 'translate(-'+leftDistance+'px)' 
      timer = setInterval(test, 3000)
    })

    var test = function() {
      if (leftDistance < totalDistance) {
        leftDistance+=300
      } else {
        leftDistance = 0
      }
      content.style.transform = 'translate(-'+leftDistance+'px)' 
    }
    timer = setInterval(test, 3000)
  </script>

这里有一个小技巧，关于事件委托，将click事件绑定到barWrap元素上, 这样可以省掉一个click事件，只需要在回调函数里面判断具体的元素实现不同方向的滚动即可。
有必要说一下在移动端通过触屏事件进行图片切换时，与上面的方法其实大同小异，判断滑屏的方向以及滑动距离，实现不同方向的切换。
关于移动端的触屏以及手势事件有必要强调一下，最初在开发移动端Web的时候使用w3c标准的语法结构和原生的js开发，但相对来说开发量比较大，而且每一步都要考虑各移动端浏览器的兼容实在让人头疼，而且实现效果也不一定很好。因此一个好的兼容性架构对于开发者来说可以节省很大一部分工作量。推荐使用hammer.js，它是一款开源的移动端脚本框架，它可以完美的实现在移端开发的大多数事件，如：点击、滑动、拖动、多点触控等事件。不需要依赖任何其他的框架，并且整个框架非常小，在使用时非常简单，代码如下：

<div id="test" class="test">
</div>
<script type="text/javascript">
  var hammertime =new Hammer(document.getElementById("test"))
  hammertime.on("pan", function (e) {
    console.log(e)
  })
</script>

具体代码：https://github.com/teapot-py/...

weixin_33778544

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Transition 实现轮播图

关于轮播图的实现算是前端的一个基础，其实实现起来是很简单，这里把实现的基本思路总结一下。轮播图的实现方案有很多种方式，可以用纯js来实现，也可用css来实现，我们这里主要用到了css3的过渡(transition)以及转换(transform),二者结合实现图片的匀速移动。虽然实现方式有很多，但是基本的html结构却是一样的。<b...
复制链接

扫一扫