欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

Transition 实现轮播图

发布时间：2025/3/19 编程问答 58 豆豆
生活随笔 收集整理的这篇文章主要介绍了 Transition 实现轮播图 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

关于轮播图的实现算是前端的一个基础，其实实现起来是很简单，这里把实现的基本思路总结一下。
轮播图的实现方案有很多种方式，可以用纯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 = 0var totalDistance = 600var content = document.getElementById('content')var barWrap = document.getElementById('barWrap')var timer = nullbarWrap.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/...

总结

以上是生活随笔为你收集整理的Transition 实现轮播图的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。