<!-- 正方形的轮播图,完美版 -->
<template>
<div id="dataCenter">
<div class="window" @mouseover="stop" @mouseleave="play">
<ul class="container" :style="containerStyle">
<li>
<!-- 把最后一张图放在最开始 -->
<img class="ppimg" :style="{width:imgWidth+'vw'}" :src="sliders[sliders.length - 1].img"
alt="">
</li>
<li v-for="(item, index) in sliders" :key="index">
<img class="ppimg" :style="{width:imgWidth+'vw'}" :src="item.img" alt=""
@click="amplification(index)">
</li>
<li>
<!-- 把第一张图放在最后 -->
<img class="ppimg" :style="{width:imgWidth+'vw'}" :src="sliders[0].img" alt="">
</li>
</ul>
<!-- // 左右切换按钮 -->
<!-- <ul class="direction">
</ul> -->
<!-- // 小圆点 -->
<ul class="dots">
<!-- <li v-for="(dot, i) in sliders" :key="i" :class="{dotted: i === (currentIndex-1)}"
@click=jump(i+1)>
</li> -->
</ul>
</div>
<!-- // 点击图片预览 -->
<div class="mask-div" @click="maskFun()" v-if="maskBol">
<img :style="{width:imgWidth+'px'}" :src="sliders[imgNumber].img" alt="" class="mask-img">
</div>
</div>
</template>
<script>
export default {
name: 'dataCenter',
props: {
initialSpeed: {
type: Number,
default: 1
}, // 图片移动速度
initialInterval: {
type: Number,
default: 1
} // 如果是一个组件 接受外部传入的切换周期
},
data() {
return {
sliders: [
{
img: 'http://blog.img.duanshuilu.com/c微信图片_20230106204002.png'
},
{
img: 'http://blog.img.duanshuilu.com/a微信图片_20230106204002.png'
},
{
img: 'http://blog.img.duanshuilu.com/bSnipaste_2023-01-06_21-05-12.png'
}
], // 放图片的数组
imgWidth: 42, // 图片宽度
currentIndex: 1, // 原点起始位置
distance: -42, // 外层嵌套的初始移动距离
transitionEnd: true, // 防止多次快速点击切换出现问题的闸门
speed: this.initialSpeed,
timer: null, // 定时器
imgNumber: 0, // 点击放大的图片
maskBol: false
}
},
computed: {
containerStyle() {
return {
// 图片大小,这里要改成vw
transform: `translate3d(${this.distance}vw, 0, 0)`
}
},
interval() {
return this.initialInterval * 2700
}
},
created() {
this.init()
},
methods: {
init() {
this.play()
},
move(offset, direction, speed) { // 移动一次的距离， 向左还是向右移动， 图片移动速度
if (!this.transitionEnd) return
this.transitionEnd = false
direction === -1 ? this.currentIndex += offset / this.imgWidth : this.currentIndex -= offset /
this.imgWidth
if (this.currentIndex > this.sliders.length) this.currentIndex = 1
if (this.currentIndex < 1) this.currentIndex = this.sliders.length
const destination = this.distance + offset * direction
this.animate(destination, direction, speed)
},
animate(des, direc, speed) { // 实际移动距离 想左还是向右 移动速度 负右正左
if (this.temp) {
window.clearInterval(this.temp)
this.temp = null
}
this.temp = window.setInterval(() => {
if ((direc === -1 && des < this.distance) || (direc === 1 && des > this
.distance)) {
this.distance += speed * direc
} else {
this.transitionEnd = true
window.clearInterval(this.temp)
this.distance = des
let allWidth = this.sliders.length * this.imgWidth
if (des < -allWidth) this.distance = -this.imgWidth
if (des > -this.imgWidth) this.distance = -allWidth
}
}, 10)
},
jump(index) {
const direction = index - this.currentIndex >= 0 ? -1 : 1
const offset = Math.abs(index - this.currentIndex) * this.imgWidth
const jumpSpeed = Math.abs(index - this.currentIndex) === 0 ? this.speed : Math.abs(index - this
.currentIndex) * this.speed
this.move(offset, direction, jumpSpeed)
},
// 自动播放函数
play() {
if (!this.maskBol) {
if (this.timer) {
window.clearInterval(this.timer)
this.timer = null
}
this.timer = window.setInterval(() => {
this.move(this.imgWidth, -1, this.speed)
}, this.interval)
}
},
stop() {
window.clearInterval(this.timer)
this.timer = null
},
amplification(index) {
let that = this
console.log('点击了第' + index + '张图片'); //0..销售商城, 1...加盟我们 2..招娉工程师
this.imgNumber = index
if (index == 0) { //跳到商城
that.$router.push('/Cart')
}
if (index == 1) { //跳到加盟我们
that.$router.push('/joinUS')
}
if (index == 2) { //跳到招娉工程师
that.$router.push('/zhaoping')
}
// this.maskBol = true
this.stop()
},
maskFun() {
this.maskBol = false
this.play()
}
}
}
</script>
<style scoped>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
ol,
ul {
list-style: none;
}
#dataCenter {
text-align: center;
}
#dataCenter .window {
position: relative;
width: 42vw;
height: 42vw;
margin: 0 auto;
overflow: hidden;
}
#dataCenter .window .container {
display: flex;
position: absolute;
}
#dataCenter .window .left,
#dataCenter .window .right {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 50%;
cursor: pointer;
}
#dataCenter .window .left {
left: 3%;
padding-left: 12px;
padding-top: 10px;
}
#dataCenter .window .right {
right: 3%;
padding-right: 12px;
padding-top: 10px;
}
#dataCenter .window img {
user-select: none;
}
.ppimg {
border-radius: 15px;
}
#dataCenter .dots {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
/* 小点样式的外圈 */
#dataCenter .dots li {
display: inline-block;
width: 15px;
height: 15px;
margin: 0 3px;
/* border: 1px solid white; */
border-radius: 50%;
background-color: rgba(51, 51, 51, 0.1);
cursor: pointer;
}
/* 小点的背景色 */
#dataCenter .dots .dotted {
background-color: orange;
}
#dataCenter .mask-div {
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.7);
position: fixed;
top: 0;
left: 0;
}
#dataCenter .mask-div .mask-img {
margin-top: calc(50vh - 200px);
}
</style>首页轮播图45
标签：
评论者:[[ schemeInfo.user.username ]]
评论内容:[[ schemeInfo.pbody ]]
评论时间:[[ schemeInfo.ptime ]]
发表你的评论:
提交评论