vue版本信息：2.5.2
这是前几个月仿某米商城首页项目时的一些感悟，现在记录在这里。所以样式以及数据什么的都是照搬过来的，没收广告费，也不耍—哔—。。。
实现的功能：
- 闪现轮播图与滑动轮播图；
- 点击
<和>箭头切换轮播图页面；- 点击右下部小圆点切换对应的轮播图；
- 切换tab页离开轮播图界面后会清空计时器，再进入时重启计时器开始播放；
- 点击
<和>时会使自动播放功能一段时间内失效，防止自动切换和手动切换同时启用发生切换混乱。
废话不多说，直接上代码
1.HTML
![]()
-
![]()
2.JS
var app = new Vue({
el: "#app",
data: {
// 闪现轮播图
imgIndex: 0,
timer: '',
delayTimer: '',
slideFlag: false,
// 滑动轮播图
slideIndex: 0,
_timer: '',
Xvalue: 0,
_delayTimer: '',
_slideFlag: false,
banners: [
{src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cefed8336bae62768afeeb6a3b8f55c8.jpg?w=2452&h=920'},
{src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/743e04f29f920648b9d99b04a85ce343.jpg?w=2452&h=920'},
{src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3d7d3f2df881cf62e5fafdada94f5018.jpg?w=2452&h=920'},
{src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6bd4174b8c5aad67a64864a5716ad152.jpg?w=2452&h=920'},
{src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a1f0eb196c6c65a89ffba6efa4b5679c.jpg?w=2452&h=920'}
]
},
methods: {
next() {
this.delay();
const lastIndex = this.banners.length - 1;
if (this.imgIndex < lastIndex) {
this.imgIndex += 1;
} else {
this.imgIndex = 0;
}
},
prev() {
this.delay();
const lastIndex = this.banners.length - 1;
if (this.imgIndex > 0) {
this.imgIndex -= 1;
} else {
this.imgIndex = lastIndex;
}
},
play() {
clearInterval(this.timer);
this.timer = setInterval(() => {
if (!this.slideFlag) {
this.next();
}
}, 5000);
},
jump(index) {
this.delay();
this.imgIndex = index;
},
delay() {// 防止手动切换和自动切换同时进行出现的混乱
this.slideFlag = true;
clearInterval(this.delayTimer);
this.delayTimer = setInterval(() => {
this.slideFlag = false;
}, 1000);
},
// 滑动轮播图
_next() {
this._delay();
const lastIndex = this.banners.length - 1;
if (this.slideIndex < lastIndex) {
this.slideIndex += 1;
this.Xvalue = - (this.slideIndex * 1226);
} else {
this.slideIndex = 0;
this.Xvalue = 0;
}
},
_prev() {
this._delay();
const lastIndex = this.banners.length - 1;
if (this.slideIndex > 0) {
this.slideIndex -= 1;
this.Xvalue = - (this.slideIndex * 1226);
} else {
this.slideIndex = lastIndex;
this.Xvalue = - (lastIndex * 1226);
}
},
_play() {
clearInterval(this._timer);
this._timer = setInterval(() => {
if (!this._slideFlag) {
this._next();
}
}, 5000);
},
_jump(index) {
this._delay();
this.slideIndex = index;
this.Xvalue = - (index * 1226);
},
_delay() {
this._slideFlag = true;
clearInterval(this._delayTimer);
this._delayTimer = setInterval(() => {
this._slideFlag = false;
}, 1000);
},
},
computed: {
transformStyle () {
return {
'transform': `translate3d(${this.Xvalue}px, 0, 0)`
}
}
},
mounted() {
this.play();
this._play();
// 切换浏览器tab页进入
window.onfocus = () => {
this.timer = setInterval(() => {
this.next();
}, 5000);
this._timer = setInterval(() => {
this._next();
}, 5000);
}
// 切换浏览器tab页退出
window.onblur = () => {
clearInterval(this.timer);
clearInterval(this._timer);
}
}
})3.CSS
* {
margin: 0px;
padding: 0px;
}
li{
list-style: none;
}
body, html {
width: 100%;
}
#app {
width: 1226px;
height: 100%;
margin: 0 auto;
}
.banner {
position: relative;
margin: 20px 0 20px;
}
.slide {
display: flex;
overflow: hidden;
}
.slide-item {
display: block;
width: 1226px;
}
.banner .banner-prev,
.banner .banner-next {
position: absolute;
top: 50%;
width: 41px;
height: 69px;
margin-top: -35px;
z-index: 5;
cursor: pointer;
outline: none;
}
.banner-prev {
background: url("images/icon-slides.png") no-repeat -84px 50%;
left: 0;
right: auto;
}
.banner-next {
background: url("images/icon-slides.png") no-repeat -125px 50%;
right: 0;
left: auto;
}
.banner-prev:hover {
background: url("images/icon-slides.png") no-repeat 0px 50%;
}
.banner-next:hover {
background: url("images/icon-slides.png") no-repeat -43px 50%;
}
.banner-points {
position: absolute;
display: inline-block;
width: 400px;
left: auto;
right: 30px;
bottom: 20px;
text-align: right;
transform: translateZ(0);
z-index: 10;
}
.banner-points .banner-point {
display: inline-block;
width: 10px;
height: 10px;
border: 2px solid #fff;
border-color: hsla(0, 0%, 100%, .3);
border-radius: 10px;
overflow: hidden;
background: rgba(0, 0, 0, .4);
opacity: 1;
margin: 0 4px;
cursor: pointer;
}
.banner-points .banner-point:hover {
background: hsla(0,0%,100%,.4);
border-color: rgba(0,0,0,.4);
}
.banner-points .active {
background: hsla(0,0%,100%,.4);
border-color: rgba(0,0,0,.4);
}
.banner-container {
position: relative;
height: 460px;
display: flex;
}
.banner-slide {
transition: all 1s ease-in-out;
}
.banner-container .image-container {
/* width: 100%; */
height: auto;
}
.image-container a {
display: block;
}
.image-container a img {
width: 100%;
}
/* 闪现轮播图 */
.banner-trans-enter-active {
transition: all .10s ease-in-out;
opacity: 1;
}
.banner-trans-leave-active {
opacity: 0;
}
.banner-trans-enter, .banner-trans-leave-to {
opacity: 0;
}
.banner-trans-enter-to, .banner-trans-leave {
opacity: 1;
}