Transition 实现轮播图
關(guān)于輪播圖的實(shí)現(xiàn)算是前端的一個(gè)基礎(chǔ)，其實(shí)實(shí)現(xiàn)起來是很簡單，這里把實(shí)現(xiàn)的基本思路總結(jié)一下。
輪播圖的實(shí)現(xiàn)方案有很多種方式，可以用純js來實(shí)現(xiàn)，也可用css來實(shí)現(xiàn)，我們這里主要用到了css3的過渡(transition)以及轉(zhuǎn)換(transform),二者結(jié)合實(shí)現(xiàn)圖片的勻速移動(dòng)。雖然實(shí)現(xiàn)方式有很多，但是基本的html結(jié)構(gòu)卻是一樣的。
然后設(shè)置slide的寬度為圖片寬度并居中，將content元素寬度設(shè)置為所有圖片的總寬度，使圖片能夠排列在同一行，同時(shí)給slide設(shè)置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>這里有一個(gè)小技巧，關(guān)于事件委托，將click事件綁定到barWrap元素上, 這樣可以省掉一個(gè)click事件，只需要在回調(diào)函數(shù)里面判斷具體的元素實(shí)現(xiàn)不同方向的滾動(dòng)即可。
有必要說一下在移動(dòng)端通過觸屏事件進(jìn)行圖片切換時(shí)，與上面的方法其實(shí)大同小異，判斷滑屏的方向以及滑動(dòng)距離，實(shí)現(xiàn)不同方向的切換。
關(guān)于移動(dòng)端的觸屏以及手勢(shì)事件有必要強(qiáng)調(diào)一下，最初在開發(fā)移動(dòng)端Web的時(shí)候使用w3c標(biāo)準(zhǔn)的語法結(jié)構(gòu)和原生的js開發(fā)，但相對(duì)來說開發(fā)量比較大，而且每一步都要考慮各移動(dòng)端瀏覽器的兼容實(shí)在讓人頭疼，而且實(shí)現(xiàn)效果也不一定很好。因此一個(gè)好的兼容性架構(gòu)對(duì)于開發(fā)者來說可以節(jié)省很大一部分工作量。推薦使用hammer.js，它是一款開源的移動(dòng)端腳本框架，它可以完美的實(shí)現(xiàn)在移端開發(fā)的大多數(shù)事件，如：點(diǎn)擊、滑動(dòng)、拖動(dòng)、多點(diǎn)觸控等事件。不需要依賴任何其他的框架，并且整個(gè)框架非常小，在使用時(shí)非常簡單，代碼如下：
具體代碼：https://github.com/teapot-py/...
總結(jié)
以上是生活随笔為你收集整理的Transition 实现轮播图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： gradle 构建过程
- 下一篇： jq 跳转方式汇总