瀏覽代碼

大事件轮播

ctt_ywq
congzc 2 年之前
父節點
當前提交
c571fe0c1e
共有 1 個檔案被更改,包括 69 行新增10 行删除
  1. +69
    -10
      src/components/home/home.vue

+ 69
- 10
src/components/home/home.vue 查看文件

@@ -254,18 +254,31 @@
<div class="timeBox">
<div class="xian"></div>
<!-- <swiper class="timeF" :slides-per-view="3" :space-between="50">
<swiper-slide class="itemBox" v-for="(item, index) in timeLsit" :key="index" @click="timeFlag = index">
<div class="timeText">{{ item.title }}</div>
<div class="ImgBox">
<div class="circle"></div>
</div>
<div class="ctn">
{{ characters == 1 ? item.ctn1 : item.ctn1_y }}
</div>
<div class="ctn">
{{ characters == 1 ? item.ctn2 : item.ctn2_y }}
</div>
</swiper-slide>
</swiper> -->
<div class="timeF">
<div class="itemBox" v-for="(item, index) in timeLsit" :key="index" @click="timeFlag = index">
<div
class="itemBox"
@mouseenter="enterSwiper(index)"
@mouseleave="leaveSwiper"
:class="swiperIndex == index ? 'hoverBox' : ''"
v-for="(item, index) in timeLsit"
:key="index"
@click="timeFlag = index">
<div class="timeText">{{ item.title }}</div>
<div class="ImgBox">
<!-- <img
:src="
timeFlag == index
? require('../../assets/img/a.png')
: require('../../assets/img/h.png')
"
alt
/> -->
<div class="circle"></div>
</div>
<div class="ctn">
@@ -316,12 +329,16 @@
import 'swiper/dist/js/swiper';
import 'swiper/dist/css/swiper.css';
import Swiper from 'swiper';
// import { Swiper, SwiperSlide } from 'swiper';
import { mapState, mapActions } from 'vuex';
export default {
data() {
return {
isPlayed: true,
// 轮播图效果
swiperIndex: 0,
timer: null,
//零时存放
charactersMy: 1,
languageLsit: [
@@ -597,7 +614,29 @@ export default {
},
methods: {
...mapActions(['setCharacters']),
// 鼠标进入轮播图
enterSwiper(index) {
this.stopTimer();
this.swiperIndex = index;
},
// 鼠标离开轮播图
leaveSwiper() {
this.startTimer();
},
// 轮播图自增
startTimer() {
let that = this;
that.timer = setInterval(() => {
that.swiperIndex++; // index 自增 1
if (that.swiperIndex >= that.timeLsit.length) {
that.swiperIndex = 0;
}
}, 3000); // 每 3 秒执行一次
},
// 清除定时器
stopTimer() {
clearInterval(this.timer); // 清除计时器
},
change(value) {
console.log(value);
this.setCharacters(value);
@@ -698,6 +737,8 @@ export default {
},
mounted() {
// 在组件挂载后开始计时器
this.startTimer();
// console.log();
new Swiper('.swiper-container', {
slidesPerView: 3,
@@ -732,6 +773,10 @@ export default {
this.goView(goView);
});
}
},
beforeDestroy() {
// 在组件销毁前清除计时器
this.stopTimer();
}
};
</script>
@@ -1624,6 +1669,20 @@ export default {
}
}
}
.hoverBox {
opacity: 0.65 !important;
transform: scale(1.1) !important;
.circle {
width: 23px !important;
height: 23px !important;
background: url('../../assets/img/a.png') !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-position: center !important;
transform: scale(0.9) !important;
}
}
}
.cooperationBox {
margin-bottom: 30px;


Loading…
取消
儲存