Transition 实现轮播图
關于輪播圖的實現算是前端的一個基礎，其實實現起來是很簡單，這里把實現的基本思路總結一下。
輪播圖的實現方案有很多種方式，可以用純js來實現，也可用css來實現，我們這里主要用到了css3的過渡(transition)以及轉換(transform),二者結合實現圖片的勻速移動。雖然實現方式有很多，但是基本的html結構卻是一樣的。
然后設置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，它是一款開源的移動端腳本框架，它可以完美的實現在移端開發的大多數事件，如：點擊、滑動、拖動、多點觸控等事件。不需要依賴任何其他的框架，并且整個框架非常小，在使用時非常簡單，代碼如下：
具體代碼：https://github.com/teapot-py/...
總結
以上是生活随笔為你收集整理的Transition 实现轮播图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： gradle 构建过程
- 下一篇： jq 跳转方式汇总