寫了1天 我把它抽象成組件 ,下次要用的使用引用一下就好(代碼在下面)
定時輪播
鼠標進入時候(用戶操作)取消 定時輪播
鼠標按下 的x座標 和 擡起的x座標 不一樣 就是在拖拽圖片
不然就是單純點擊圖片 進入對應頁面
調用方
</template>
<!-- 數據 、 輪播圖的 寬 和 高-->
<swiper :imgList="imgList" style="width: 900px; height: 512px;"/>
</template>
<script>
// 這三個是圖片
import lv_dou_gao_home from "@/assets/lv_dou_gao_home.jpg"
import mk_44 from "@/assets/mk_44.jpg"
import cxk_1 from "@/assets/cxk_1.jpg"
export default {
name: "xxx",
data() {
return {
imgList: [
{
imgURI: lv_dou_gao_home,
commodityId: 40
},
{
imgURI: mk_44,
commodityId: 16
},
{
imgURI: cxk_1,
commodityId: 35
},
],
}
}
}
</script>
輪播圖 組件 代碼
<template>
<div class="swiperBox" ref="swiperBox" @mouseup="mouseup" @mousemove="mousemove" @mouseenter="mouseenter" @mouseleave="mouseleave">
<div style="position: relative;">
<!-- 左側按鈕 -->
<div class="arrow-l" @click="indexSub()"><</div>
<!-- 右側按鈕 -->
<div class="arrow-r" @click="indexAdd()">></div>
<!-- 核心的滾動區域 -->
<ul class="imgList" ref="imgList">
<li v-for="item in imgList">
<img :src="item.imgURI" ref="img" @mousedown="mousedown($event, item.commodityId)" >
</li>
<li>
<img :src="imgList[0].imgURI">
</li>
</ul>
<!--下面的小圈圈-->
<ul class="optionList">
<li v-for="(item,index) in imgList">
<div @click="indexOption=index" :class="{indexOption:show_indexOption==index}"></div>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: "swiper",
props: ['imgList'],
data(){
return{
flag_indexChange:true,
indexOption:0,
show_indexOption:0,
flag_move:false,
mousedown_clientX:0,
img_commodityId:0,
}
},
computed:{
listLength(){
return this.imgList.length;
},
imgWidth(){
return this.$refs.swiperBox.offsetWidth;
}
},
watch:{
indexOption(val){
this.show_indexOption = val;
this.animate(val)
}
},
mounted(){
this.$refs.swiperBox.firstChild.style.width = this.imgWidth + "px";
this.$refs.swiperBox.firstChild.style.height = this.$refs.swiperBox.offsetHeight + "px";
this.$refs.imgList.style.width = (this.listLength +1) + "00%";
var imgArray = document.querySelectorAll('.imgList img');
for (var i =0;i < (this.listLength +1);i++){
imgArray[i].style.width = this.imgWidth + "px";
imgArray[i].style.height = this.$refs.swiperBox.offsetHeight + "px";
}
this.set_swiperBox_timer();
},
methods:{
set_swiperBox_timer(){
clearInterval(this.$refs.swiperBox.timer);
let tempThis = this;
this.$refs.swiperBox.timer = setInterval(function() {
tempThis.indexAdd();
},2000);
},
animate(index, callback){
let target = -index* this.imgWidth;
let obj = this.$refs.imgList;
let tempThis = this;
// 先清除以前的定時器,只保留當前的一個定時器執行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 步長值寫到定時器的裏面
// 把我們步長值改爲整數 不要出現小數的問題
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
// 停止動畫 本質是停止定時器
clearInterval(obj.timer);
tempThis.flag_indexChange = true;
callback && callback(tempThis); //如果又回調函數 就執行
}
// 把每次加1 這個步長值改爲一個慢慢變小的值 步長公式:(目標值 - 現在的位置) / 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
},
indexAdd(){
if (this.flag_indexChange){
this.flag_indexChange = false;
var temp_index = this.indexOption+1;
if (temp_index != this.listLength){
this.indexOption =temp_index;
}else {
//先 show_indexOption = 0 這樣 小圈圈 才和圖片同步刷新 (不信就註釋看看)
this.show_indexOption = 0;
this.animate(temp_index, function (tempThis) {
tempThis.$refs.imgList.style.left = '0px';
tempThis.indexOption =0;
});
}
}
},
indexSub(){
if (this.flag_indexChange){
this.flag_indexChange = false;
if (this.indexOption != 0){
this.indexOption =this.indexOption - 1;
}else {
//看下面的mousemove函數 拖拽圖片 鬆開鼠標 不用this.$refs.imgList.style.left = -(this.listLength * this.imgWidth) + 'px';
if (false == this.flag_move){
this.$refs.imgList.style.left = -(this.listLength * this.imgWidth) + 'px';
} else {
this.flag_move = false;
}
this.indexOption =this.listLength - 1;
}
}
},
mousedown(event, commodityId){
this.mousedown_clientX = event.clientX;
this.img_commodityId = commodityId;
event.preventDefault();
},
mouseup(event, commodityId){
if (0 != this.mousedown_clientX){
var difference = this.mousedown_clientX - event.clientX ;
this.mousedown_clientX = 0;
//如果 差值爲不爲0 鼠標按下 的x座標 和 擡起的x座標 不一樣
//就是在拖拽圖片
if ( 0 != difference) {
difference > 0 ? this.indexAdd() : this.indexSub();
}else {
//打開該圖片對應的商品頁面
this.click_img();
}
}
},
mouseleave(event){
if (0 != this.mousedown_clientX){
var difference = this.mousedown_clientX - event.clientX ;
this.mousedown_clientX = 0;
difference > 0 ? this.indexAdd() : this.indexSub();
}
this.set_swiperBox_timer();
},
mouseenter(){
// 操作過程不要定時器 干擾
clearInterval(this.$refs.swiperBox.timer);
},
mousemove(event){
if (0 != this.mousedown_clientX){
var difference = this.mousedown_clientX - event.clientX ;
console.log(difference)
if (0 < difference || 0!=this.indexOption){
this.$refs.imgList.style.left = -(this.indexOption * this.imgWidth + difference )+ 'px';
} else {
this.$refs.imgList.style.left = -(this.listLength * this.imgWidth + difference)+ 'px';
this.flag_move = true;
}
}
},
click_img(){
const {href} = this.$router.resolve({
name:'commodityPage',
query:{
commodityId:this.img_commodityId
}
});
window.open(href,'_blank');
}
}
}
</script>
<style scoped>
.arrow-l, .arrow-r{
cursor: pointer;
display: none;
position: absolute;
top: 45%;
width: 24px;
height: 40px;
background: rgba(0, 0, 0, .3);
text-align: center;
line-height: 40px;
color: #fff;
font-size: 18px;
z-index: 2;
}
.arrow-r{
right: 0px;
}
.swiperBox:hover .arrow-l, .swiperBox:hover .arrow-r{
display: block;
}
.swiperBox{
/*寫在 swiperBox 的div 裏面了,這樣swiperBox 可以不relative*/
/*position: relative;*/
overflow: hidden;
/*寫在調用方了*/
/*top: -520px;*/
/*left: 23%;*/
/*width: 900px;*/
/*height: 512px;*/
}
.imgList img{
cursor: pointer;
/*寫 mounted()裏面了*/
/*width: 900px;*/
/*height: 512px;*/
}
.imgList{
padding: 0px;
margin: 0px;
position: absolute;
/*width: 9900%;*/ /*寫 mounted()裏面了*/
list-style: none;
}
.imgList li{
float: left;
}
.optionList{
position: absolute;
bottom: 15px;
left: 50px;
list-style: none;
}
.optionList li{
float: left;
z-index: 2;
}
.optionList li div{
cursor: pointer;
border-radius: 20px;
border: 2px solid rgba(255, 255, 255, 0.5);
margin: 0px 7px;
width: 15px;
height: 15px;
transition:background 0.5s;
-moz-transition:background 0.5s; /* Firefox 4 */
-webkit-transition:background 0.5s; /* Safari and Chrome */
-o-transition:background 0.5s; /* Opera */
}
.indexOption{
background: white;
}
</style>