Vue手寫橫向輪播圖的實例
Vue手寫橫向輪播圖
前提:自己封裝的輪播圖,暫時沒測出bug~
效果如下圖,一行三個,點擊上一張/下一張 向前或向后移動一格,窗口縮放會適當(dāng)變形,不影響切換
<template> <div class="swiper-template"> <div class="my-swiper-page"> <div class="page-left"> <span>{{ activeIndex + 1 }}</span >/{{ swiperList.length }} </div> </div> <div class="my-swiper-container" v-show="swiperList.length"> <div class="my-swiper-wapper"> <div class="arrow imgLeft" @click="clickLeft"> <span class="el-icon-arrow-left"></span> </div> <div class="arrow imgRight" @click="clickRight"> <span class="el-icon-arrow-right"></span> </div> <div ref="swiperDom" class="my-swiper-content"> <ul ref="swiperDomUI" :style="ulStyle"> <li v-for="(item, index) in swiperList" :key="item.id" class="" :style="{ width: liWidth + 'px' }" ref="liDom" @click="changeIndex(item, index)" > <div class="introduce-li-box" :class="index === activeIndex ? 'active' : ''" > <div class="introduce-img"><img :src="item.url" /></div> <div class="introduce-name">{{ item.name }}</div> </div> </li> </ul> </div> </div> </div> </div> </template>
<script> export default { props: { swiperList: { type: Array, default: () => [ { name: 'test1', url: 'https://alifei04.cfp.cn/creative/vcg/veer/1600water/veer-130182553.jpg', path: '/detail' }, { name: 'test2', url: 'https://alifei04.cfp.cn/creative/vcg/veer/1600water/veer-130182553.jpg', path: '/detail' }, { name: 'test3', url: 'https://alifei04.cfp.cn/creative/vcg/veer/1600water/veer-130182553.jpg', path: '/detail' }, { name: 'test4', url: 'https://alifei04.cfp.cn/creative/vcg/veer/1600water/veer-130182553.jpg', path: '/detail' } ] } }, data() { return { activeIndex: 0, // 當(dāng)前移動圖片的索引值 boxWidth: 0, liWidth: 0, ulStyle: { left: 0 } } }, computed: {}, created() {}, mounted() { this.getWidth() window.addEventListener('resize', this.getWidth) }, methods: { changeIndex(item, index) { this.activeIndex = index this.$router.push(item.path) }, getWidth() { this.boxWidth = this.$refs.swiperDom.offsetWidth this.liWidth = this.boxWidth / 3 if (this.activeIndex * this.liWidth > this.boxWidth) { this.ulStyle = { left: -this.activeIndex * this.liWidth + 'px' } } }, clickLeft() { if (this.activeIndex > 0) { this.activeIndex-- // 索引值-1 let offsetLeft = this.activeIndex * this.liWidth + this.liWidth let ulLeft = this.$refs.swiperDomUI.offsetLeft let distance = 0 if (ulLeft < 0) { if (offsetLeft <= this.boxWidth) { if (-ulLeft > this.boxWidth) { distance = Math.abs(ulLeft + this.boxWidth) } else { distance = -ulLeft } } else { distance = offsetLeft - this.boxWidth if (distance >= this.liWidth) { distance = this.liWidth } else { distance = distance } } let index = 0 let temp = window.setInterval(() => { if (index < distance && ulLeft < 0) { index += 2 // 每次向右移動的距離 this.ulStyle = { left: ulLeft + index + 'px' } } else { window.clearInterval(temp) } }, 10) } } }, clickRight() { if (this.activeIndex < this.swiperList.length - 1) { this.activeIndex++ let offsetLeft = this.activeIndex * this.liWidth + this.liWidth if (offsetLeft > this.boxWidth) { let ulLeft = Math.abs(this.$refs.swiperDomUI.offsetLeft) let distance = offsetLeft - this.boxWidth - ulLeft let index = 0 let temp = window.setInterval(() => { if (index < distance) { index += 2 // 每次向右移動的距離 this.ulStyle = { left: -(ulLeft + index) + 'px' } } else { window.clearInterval(temp) } }, 10) } } } }, destroyed() { window.removeEventListener('resize', this.getWidth) } } </script>
<style lang="scss" scoped> .swiper-template { .my-swiper-page { font-size: 16px; color: #bababa; width: 100%; margin: 50px auto; justify-content: space-around; .page-left { text-align: left; width: 50%; padding-left: 30px; box-sizing: border-box; span { font-size: 24px; color: #000000; } } } .my-swiper-container { width: 100%; height: 405px; .my-swiper-wapper { width: 100%; height: 100%; position: relative; padding: 0 30px; font-size: 16px; box-sizing: border-box; .arrow { display: inline-block; cursor: pointer; background: #fff; padding: 7px; &:hover { background: #c09d7b; color: #fff; } } .imgLeft { text-align: left; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .imgRight { text-align: right; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .my-swiper-content { width: 100%; height: 100%; position: relative; overflow: hidden; ul { width: auto; white-space: nowrap; position: absolute; left: 0; li { display: inline-block; padding: 0 8px; box-sizing: border-box; .introduce-li-box { width: 100%; height: 405px; box-sizing: border-box; cursor: pointer; text-align: center; .introduce-img { width: 100%; height: 360px; overflow: hidden; img { height: 100%; -webkit-transition: all 0.61s; transition: all 0.6s; &:hover { transform: scale(1.2); -webkit-transform: scale(1.2); } } } .introduce-name { width: 100%; height: 45px; line-height: 45px; font-size: 16px; color: #1f1205; background: #ffffff; } &:hover { .introduce-name { background: #c09d7b; color: #fff; } } &.active { .introduce-name { // background: #c09d7b; // color: #fff; } } } } } } } } } </style>
Vue常見的輪播圖
很多頁面里,項目里,輪播圖幾乎是無處不在,今天我們就來說說輪播圖的寫法
在輪播圖數(shù)組list中,定義一個變量listIndex = 0表示第一張圖片,默認(rèn)渲染第一張圖片即list[listIndex],然后獲取每張圖片的下標(biāo)。點擊切換圖片時把當(dāng)前圖片的下標(biāo)賦值給listIndex即可實現(xiàn)圖片切換顯示。
展示代碼
<template> <div class="home"> <div class="box" @mouseout="out" @mouseover="over"> <img v-for="(item, index) in list" v-show="listIndex === index" :key="index" :src="item" alt="" /> <p class="left" @click="changePage(prevIndex)"><</p> <ul> <li :class="{ color: index == listIndex }" v-for="(item, index) in list" @click="changePage(index)" :key="index" ></li> </ul> <p class="right" @click="changePage(nextIndex)">></p> </div> </div> </template>
<script> export default { components: {}, props: {}, data() { return { list: [ require("../../public/image/1.jpg"), require("../../public/image/2.jpg"), require("../../public/image/3.jpg"), require("../../public/image/4.jpg"), ], listIndex: 0, //默認(rèn)顯示第幾張圖片 timer: null, //定時器 }; }, computed: { //上一張 prevIndex() { if (this.listIndex == 0) { return this.list.length - 1; } else { return this.listIndex - 1; } }, //下一張 nextIndex() { if (this.listIndex == this.list.length - 1) { return 0; } else { return this.listIndex + 1; } }, }, methods: { changePage(index) { this.listIndex = index; }, //移除 out() { this.setTimer(); }, //移入 over() { clearInterval(this.timer); }, //1秒切圖 setTimer() { this.timer = setInterval(() => { this.listIndex++; if (this.listIndex == this.list.length) { this.listIndex = 0; } }, 1000); }, }, created() { //定時器 this.setTimer(); }, mounted() {}, }; </script>
<style scoped lang="less"> .home { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; .box { position: relative; width: 500px; height: 500px; img { width: 100%; height: 100%; z-index: 100; } p { cursor: pointer; color: white; font-size: 28px; display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background: rgba(0, 0, 0, 0.5); } .left { position: absolute; top: 50%; left: 0; } .right { position: absolute; top: 50%; right: 0; } ul { list-style: none; display: flex; justify-content: space-around; align-items: center; position: absolute; width: 150px; height: 20px; top: 90%; right: 35%; .color { background: red; color: red; } li { cursor: pointer; width: 10px; height: 10px; background: white; border-radius: 50%; } } } } </style>
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue項目環(huán)境搭建?啟動?移植操作示例及目錄結(jié)構(gòu)分析
這篇文章主要介紹了vue項目環(huán)境搭建、啟動、項目移植、項目目錄結(jié)構(gòu)分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步早日升職加薪2022-04-04vue微信分享 vue實現(xiàn)當(dāng)前頁面分享其他頁面
這篇文章主要為大家詳細(xì)介紹了vue微信分享功能,vue實現(xiàn)當(dāng)前頁面分享其他頁面,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-12-12elementui之el-tebs瀏覽器卡死的問題和使用報錯未注冊問題
這篇文章主要介紹了elementui之el-tebs瀏覽器卡死的問題和使用報錯未注冊問題2019-07-07解決vue項目刷新后,導(dǎo)航菜單高亮顯示的位置不對問題
今天小編就為大家分享一篇解決vue項目刷新后,導(dǎo)航菜單高亮顯示的位置不對問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11vue 不使用select實現(xiàn)下拉框功能(推薦)
這篇文章主要介紹了vue 不使用select實現(xiàn)下拉框功能,在文章給大家提到了vue select 組件的使用與禁用,需要的朋友可以參考下2018-05-05