圖片輪播,自動移動小圖
阿新 • • 發佈：2019-01-26
isl ceil pac undefine string 固定 nod tel obj
<template>
<div class="imgCarouselWrap" ref="imgCarouselWrap" :style="{height: height + ‘px‘, width: width + ‘px‘}">
<div class="bigImgWrap">
<el-carousel ref="elCarousel" @change="cardChange" indicator-position="none" :autoplay="false" :height="wrapHeight">
<div class="disableSelectLeft" v-show="!toSelectLeft"></div>
<div class="disableSelectRight" v-show="!toSelectRight"></div>
<el-carousel-item v-for="(item, index) in imgUrls" :key="index+‘img‘">
<div class="imgItemWrap">
<img class="imgItem" :src="item" alt="alt">
</div>
</el-carousel-item>
</el-carousel>
</div>
<div class="smallImgWrap">
<div class="viewWidth">
<div class="smallImgGroup" :style="{width: smallImgGroupWidth,transition: ‘all 0.4s ease‘,transform:smallImgTranslateX}">
<div
@click="selectImg(index)"
class="smallImg" :class="{isSelected: index === currentIndex}"
v-for="(item, index) in imgUrls" :key="index + ‘smallimg‘">
<img class="smallImgItem" :src="item" alt="alt">
</div>
</div>
</div>
<button
v-if="imgUrls.length > Math.floor(maxViewImgNum)"
@click="toLeftImg()"
class="smallArrow el-carousel__arrow" style="left:0"
:class="{noDrop: noDropLeft}"><i class="el-icon-arrow-left"></i></button>
<button
v-if="imgUrls.length > Math.floor(maxViewImgNum)"
@click="toRightImg()"
class="smallArrow el-carousel__arrow" style="right:0"
:class="{noDrop: noDropRight}"><i class="el-icon-arrow-right"></i></button>
</div>
</div>
</template>
<script>
export default {
data () {
return {
// 主圖右箭頭
rightArrow: null,
// 主圖左箭頭
leftArrow: null,
// 主圖左側是否可以選擇移動
toSelectLeft: true,
// 主圖右側是否可以選擇移動
toSelectRight: true,
// 選擇圖組當前圖索引
currentIndex: 0,
// 選擇圖組的可視區域寬度
imgViewWidth: 0,
// 選擇圖片的寬度
smallImgWidth: 75,
// 選擇圖片的寬度
smallImgheight: 75,
// margin
marginVal: 5,
// 選擇圖組 左偏移量
moveLeftNum: 0,
// 選擇圖組 右偏移量
moveRightNum: 0,
// 選擇圖組的樣式
smallImgTranslateX: ‘translateX(0)‘,
// 選擇圖組的左是否可移動
noDropLeft: false,
// 選擇圖組的右是否可移動
noDropRight: false
}
},
props: {
// 圖片加載失敗的提示
alt: {
type: String
},
// 點擊圖片左右箭頭是否首位循環
isLoops: {
type: Boolean,
default: false
},
// 圖片url,必須先使用require或import加載
imgUrls: {
type: Array,
required: true
},
// 組件高度
height: {
type: String,
required: true
},
// 組件寬度
width: {
type: String,
required: true
}
},
computed: {
/**
* @author lizhiwei8
* @date 2019/01/25
* @desc 主圖高度
* 80 為選擇圖的固定高度 75 加marginTop 5
*/
wrapHeight: function () {
return (this.height - this.smallImgheight - this.marginVal) + ‘px‘
},
// 主圖寬度
wrapWidth: function () {
return this.width + ‘px‘
},
// 選擇圖group寬度計算
smallImgGroupWidth: function () {
return this.imgUrls.length * this.smallImgWidth + ‘px‘
},
// 可視區域顯示選擇圖數量
maxViewImgNum: function () {
return this.imgViewWidth / this.smallImgWidth
}
},
methods: {
/**
* @author lizhiwei8
* @date 2019/01/25
* @desc 監聽主圖切換
*/
cardChange (cur, pre) {
// 控制滑動箭頭是否顯示
if (!this.isLoops) {
if (this.imgUrls.length <= 1) {
this.toSelectLeft = false
this.toSelectRight = false
// this.rightArrow.style.visibility = ‘hidden‘
// this.leftArrow.style.visibility = ‘hidden‘
} else {
if (cur === this.imgUrls.length - 1) {
this.toSelectRight = false
// this.rightArrow.style.visibility = ‘hidden‘
} else if (cur === 0) {
this.toSelectLeft = false
// this.leftArrow.style.visibility = ‘hidden‘
} else {
this.toSelectLeft = true
this.toSelectRight = true
// this.rightArrow.style.visibility = ‘visible‘
// this.leftArrow.style.visibility = ‘visible‘
}
}
// 選擇小圖和主圖對應
this.currentIndex = cur
this.autoChangeGroup(cur, pre)
}
},
/**
* @author lizhiwei8
* @date 2019/01/24
* @desc 自動切換
* 聯動:通過主圖左右切換帶動小圖左右移動
* 手動:通過小圖選擇帶動小圖和主圖移動
* 中間小圖可選區域為可視區域
* 可視區域有左右邊界
* 可是區域左右兩側不可見小圖為不可見區域
* index:當前索引
* pre:上一個圖片索引
*/
autoChangeGroup (index, pre) {
let smallImgWidth = this.smallImgWidth
// 當切換時控制選擇圖組,如果是右側最後一個則自動移動選擇圖組到下一組
let leftImgNum = Math.abs(this.moveLeftNum) / smallImgWidth // 左側已經移動的數量
let maxViewImg = Math.ceil(this.maxViewImgNum) // 當前可視區域顯示的最大數量
let lastViewImg = leftImgNum + maxViewImg - 1 // 可視區域最後一個的索引
// 右側邊界向右移動(手動/聯動),切換到下一組
// 若果是最右側手動點擊或則最右側從左向右切圖的項則自動向左移動一組
if ((index === lastViewImg && pre === undefined) || (index === lastViewImg && pre < index)) {
this.toLeftImg((maxViewImg - 1) * smallImgWidth)
}
// 右側邊界向左移動-聯動,切換到上一組,向左移動一個單位
if (index === lastViewImg && pre > index) {
this.toLeftImg()
}
// 右側不可見向左移動-聯動
if (index > lastViewImg && pre > index) {
this.toLeftImg((index - lastViewImg) * smallImgWidth)
}
// 右側不可見向右移動-聯動
if (index > lastViewImg && pre < index) {
this.toLeftImg((index - leftImgNum) * smallImgWidth)
}
// 左側邊界向左移動
if (index === leftImgNum - 1 && pre > index) {
if (leftImgNum < maxViewImg) {
this.toRightImg(leftImgNum * smallImgWidth)
} else {
this.toRightImg((maxViewImg - 1) * smallImgWidth)
}
}
// 左側不可見向左移動-聯動
if (index < leftImgNum && pre > index) {
if (index < maxViewImg) {
this.toRightImg((lastViewImg - (maxViewImg - 1)) * smallImgWidth)
} else {
this.toRightImg((lastViewImg - index) * smallImgWidth)
}
}
// 左側不可見向右移動-聯動
if (index < leftImgNum && pre < index) {
if (leftImgNum < maxViewImg) {
this.toRightImg((lastViewImg - (maxViewImg - 1)) * smallImgWidth)
} else {
this.toRightImg((leftImgNum - index) * smallImgWidth)
}
}
},
// 禁止移動選擇圖條
forbidMove () {
if (this.moveLeftNum === 0) {
this.noDropRight = true
} else {
this.noDropRight = false
}
// 可視圖數量,小數
let maxViewImg = Math.floor(this.maxViewImgNum)
let imgUrlsLen = this.imgUrls.length
if (imgUrlsLen <= maxViewImg) {
this.noDropLeft = true
} else {
let residue = imgUrlsLen - Math.abs(this.moveLeftNum) / this.smallImgWidth
if (residue <= maxViewImg) {
this.noDropLeft = true
} else {
this.noDropLeft = false
}
}
},
// 選擇圖左移
// moveWidth 在已有位置上待移動量
toLeftImg (moveWidth = this.smallImgWidth) {
// 禁止移動
if (this.noDropLeft) return
if (this.moveRightNum > 0) {
this.moveRightNum -= moveWidth
this.moveLeftNum = this.moveRightNum
} else {
this.moveLeftNum -= moveWidth
}
this.smallImgTranslateX = ‘translateX(‘ + this.moveLeftNum + ‘px)‘
this.forbidMove()
},
// 選擇圖右移
// moveWidth 在已有位置上待移動量
toRightImg (moveWidth = this.smallImgWidth) {
// 禁止移動
if (this.noDropRight) return
if (this.moveLeftNum < 0) {
this.moveLeftNum += moveWidth
this.moveRightNum = this.moveLeftNum
} else {
this.moveRightNum += moveWidth
}
this.smallImgTranslateX = ‘translateX(‘ + this.moveRightNum + ‘px)‘
this.forbidMove()
},
// 手動選擇圖片
selectImg (index) {
this.autoChangeGroup(index)
this.$refs.elCarousel.setActiveItem(index)
},
// 獲取dom節點信息
getDomInfo () {
// 主圖的左右切換箭頭
this.rightArrow = this.$refs.imgCarouselWrap.getElementsByClassName(‘el-carousel__arrow--right‘)[0]
this.leftArrow = this.$refs.imgCarouselWrap.getElementsByClassName(‘el-carousel__arrow--left‘)[0]
// 獲取選擇圖組的可視區域寬度
this.imgViewWidth = this.$refs.imgCarouselWrap.getElementsByClassName(‘viewWidth‘)[0].clientWidth
}
},
mounted () {
this.forbidMove()
this.getDomInfo()
}
}
</script>
<style lang="less">
.imgCarouselWrap{
width: 100%;
height: 100%;
.bigImgWrap{
overflow: hidden;
}
.smallImgWrap {
height:70px;
margin-top:10px;
position: relative;
padding: 0 20px;
.viewWidth{
overflow: hidden;
margin-right: 5px;
}
.smallImgGroup{
height: 70px;
width: 1000px;
}
.smallImg{
height: 70px;
width: 70px;
margin-left: 5px;
overflow: hidden;
text-align: center;
float: left;
position: relative;
cursor: pointer;
&.isSelected{
border: 3px solid #FFCD00;
}
.smallImgItem{
height: 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
// &:hover{
// transform: translateX(-50%) scale(1.2);
// }
}
}
.smallArrow{
width: 20px;
}
.smallArrow.noDrop i{
cursor: no-drop;
}
.smallArrow.noDrop{
cursor: no-drop;
}
}
.el-carousel__arrow--right {
right: 0;
}
.el-carousel__arrow--left {
left: 0;
}
.el-carousel__arrow{
border-radius: 0;
height: 70px;
width: 30px;
font-size: 20px;
}
.imgItemWrap{
height:100%;
text-align:center;
.imgItem{
height:100%;
}
}
.disableSelectLeft,.disableSelectRight{
height: 70px;
width: 30px;
position: absolute;
top: 50%;
z-index: 20;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
cursor: no-drop;
}
.disableSelectRight{
right:0;
}
.disableSelectLeft{
left:0;
}
}
</style>
/// 調用
<template>
<page-container :breadcrumb="i18nBreadcrumb" :headerNonShadow="true" :nonSpacing="true">
<page-card>
<img-carousel width="600" height="500" :imgUrls="imgUrls"></img-carousel>
</page-card>
</page-container>
</template>
<script>
// import imgCar1 from ‘./imgCarouseldiv1‘
import imgCarousel from ‘./imgCarouseldiv2‘
export default({
props: {
breadcrumbObj: {
type: Object,
debufult: {}
}
},
components: {
imgCar1,
imgCarousel
},
data () {
return {
imgUrls: [
require(‘./image/1.jpg‘),
require(‘./image/2.jpg‘),
require(‘./image/3.jpg‘),
require(‘./image/4.jpg‘),
require(‘./image/5.jpg‘),
require(‘./image/6.jpg‘),
require(‘./image/7.jpg‘),
require(‘./image/8.jpg‘),
require(‘./image/9.jpg‘),
require(‘./image/10.jpg‘),
require(‘./image/11.jpg‘),
require(‘./image/12.jpg‘),
require(‘./image/13.jpg‘),
require(‘./image/14.jpg‘),
require(‘./image/15.jpg‘),
require(‘./image/16.jpg‘),
require(‘./image/17.jpg‘),
require(‘./image/18.jpg‘),
require(‘./image/19.jpg‘),
require(‘./image/20.jpg‘),
require(‘./image/21.jpg‘),
require(‘./image/22.jpg‘),
require(‘./image/23.jpg‘),
require(‘./image/24.jpg‘),
require(‘./image/25.jpg‘),
require(‘./image/26.jpg‘),
require(‘./image/27.jpg‘)
]
}
}
})
</script>
<style scoped>
</style>
圖片輪播,自動移動小圖