用vue實(shí)現(xiàn)一個(gè)仿簡(jiǎn)書的輪播圖效果
來(lái)源 |?https://bougieblog.cn/
先展示最終效果：
解決思路：
vue的理念是以數(shù)據(jù)驅(qū)動(dòng)視圖，所以拒絕通過(guò)改變?cè)氐膍argin-top來(lái)實(shí)現(xiàn)滾動(dòng)效果。
寫好css樣式，只需改變每張圖片的class即可實(shí)現(xiàn)輪播效果。可以將輪播圖看成兩個(gè)，如圖所示：
代碼實(shí)現(xiàn)：
各個(gè)slide的樣式：?
$width: 800px; // 容器寬度$height: 300px; // 容器高度$bWidth: 500px; // 大圖片寬度$sWidth: $width - $bWidth; // 小圖片寬度$sHeight: $height / 2; // 小圖片高度#slider-wrapper{width: $width;height: $height;margin: 0 auto;cursor: pointer;background: #ddd;border-radius: 5px;box-shadow: 0 1px 6px rgba(0,0,0,0.117647), 0 1px 4px rgba(0,0,0,0.117647);display: flex;overflow: hidden;div{display: inline-block;}}.main-slide{width: $bWidth;height: $height;float: left;transition: all .4s ease;}.extra-slide{width: $sWidth;position: relative;.extra-slide-item{position: absolute;width: $sWidth;height: $sHeight;left: 0;transition: .4s ease-out;}.extra-slide-top{top: -$sHeight;}.extra-slide-middle-first{top: 0;z-index: 2}.extra-slide-middle-second{top: $sHeight;z-index: 2}.extra-slide-bottom{top: $height}.extra-slide-hide{display: none!important;}}
scripts部分，設(shè)置一個(gè)nowIndex，定時(shí)改變nowIndex。所有圖片的class根據(jù)這個(gè)nowIndex來(lái)變化，這里使用了es6的map類型：
import slideConfig from './slideConfig'const slideLength = slideConfig.lengthexport default {name: 'slider',data: function() {return {slideConfig: slideConfig,slideInterval: null,nowIndex: 0}},methods: {resetIndex(i) {return i > slideLength - 1 ? i - slideLength : i},slideClass(i) {let nowIndex = this.nowIndexlet map = new Map([[this.resetIndex(nowIndex), 'extra-slide-top'],[this.resetIndex(nowIndex + 1), 'extra-slide-middle-first'],[this.resetIndex(nowIndex + 2), 'extra-slide-middle-second'],[this.resetIndex(nowIndex + 3), 'extra-slide-bottom']])return map.get(i) ? map.get(i) : 'extra-slide-hide'},start() {this.slideInterval = setInterval(() => {this.nowIndex = this.nowIndex > slideLength - 2 ? 0 : this.nowIndex + 1console.log(this.nowIndex)}, 2000)},stop() {clearInterval(this.slideInterval)this.slideInterval = null}},mounted() {this.start()},destroyed() {this.stop()}}
slideConfig，這里可以寫成組件的props：
const prefix = '/src/assets/'const slideConfig = [{src: prefix + 's1.jpg',title: '圖1',desc: '說(shuō)明1'}, {src: prefix + 's2.jpg',title: '圖2',desc: '說(shuō)明2'}, {src: prefix + 's3.jpg',title: '圖3',desc: '說(shuō)明3'}, {src: prefix + 's4.jpg',title: '圖4',desc: '說(shuō)明4'}, {src: prefix + 's5.jpg',title: '圖5',desc: '說(shuō)明5'}, {src: prefix + 's6.jpg',title: '圖6',desc: '說(shuō)明6'}]export default slideConfig
gitHub傳送門：https://github.com/bougieL/jianshuslider
專注分享當(dāng)下最實(shí)用的前端技術(shù)。關(guān)注前端達(dá)人，與達(dá)人一起學(xué)習(xí)進(jìn)步！
長(zhǎng)按關(guān)注"前端達(dá)人"
評(píng)論
圖片
表情