|
|
@@ -180,142 +180,148 @@
|
|
|
教师简介
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="relative flex-1 p-4">
|
|
|
+ <div class="relative flex-1 p-4" v-loading="state.teacher.loading">
|
|
|
<div class="teacher-carousel h-full" id="teacherCarousel">
|
|
|
- <div
|
|
|
- class="teacher-slide active flex items-center justify-center p-6"
|
|
|
- >
|
|
|
- <div
|
|
|
- class="card-hover w-full max-w-4xl rounded-lg bg-gray-50 p-6"
|
|
|
- ref="ref_ccc"
|
|
|
- >
|
|
|
- <div class="teacher-profile">
|
|
|
- <div class="teacher-avatar">
|
|
|
- <div
|
|
|
- class="mx-auto h-36 w-36 overflow-hidden rounded-full bg-gray-200"
|
|
|
- >
|
|
|
- <img
|
|
|
- src="https://picsum.photos/id/1005/200/200"
|
|
|
- alt="教师头像"
|
|
|
- class="h-full w-full object-cover"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="teacher-info">
|
|
|
- <div class="mb-2 text-2xl font-bold text-gray-800">
|
|
|
- 王老师 width: {{ ref_ccc?.clientWidth }} height:
|
|
|
- {{ ref_ccc?.clientHeight }}
|
|
|
- </div>
|
|
|
- <div class="mb-4 text-lg text-[var(--czr-main-color)]">
|
|
|
- 语文教师 | 10年教龄
|
|
|
- </div>
|
|
|
- <div class="leading-relaxed text-gray-600">
|
|
|
- 毕业于北京师范大学中文系，曾获市级优秀教师称号，擅长文言文教学和写作指导。教学风格生动有趣，注重培养学生的文学素养和审美能力。<br /><br />
|
|
|
- 在过去的教学实践中，王老师开发了"情境式文言文教学法"，通过历史场景还原和角色扮演，帮助学生深入理解古文内涵。所带班级语文平均分连续五年位列年级第一，指导的学生多次在全国作文比赛中获奖。
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="teacher-slide flex items-center justify-center p-6">
|
|
|
- <div
|
|
|
- class="card-hover w-full max-w-4xl rounded-lg bg-gray-50 p-6"
|
|
|
- >
|
|
|
- <div class="teacher-profile">
|
|
|
- <div class="teacher-avatar">
|
|
|
- <div
|
|
|
- class="mx-auto h-36 w-36 overflow-hidden rounded-full bg-gray-200"
|
|
|
- >
|
|
|
- <img
|
|
|
- src="https://picsum.photos/id/1010/200/200"
|
|
|
- alt="教师头像"
|
|
|
- class="h-full w-full object-cover"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="teacher-info">
|
|
|
- <div class="mb-2 text-2xl font-bold text-gray-800">
|
|
|
- 李老师 width: {{ ref_ccc?.clientWidth }} height:
|
|
|
- {{ ref_ccc?.clientHeight }}
|
|
|
- </div>
|
|
|
- <div class="mb-4 text-lg text-[var(--czr-main-color)]">
|
|
|
- 数学教师 | 8年教龄
|
|
|
- </div>
|
|
|
- <div class="leading-relaxed text-gray-600">
|
|
|
- 毕业于复旦大学数学系，教学风格生动有趣，注重培养学生的逻辑思维能力。曾多次指导学生参加数学竞赛并获得省级奖项，深受学生喜爱。<br /><br />
|
|
|
- 李老师独创"生活化数学"教学模式，将抽象的数学概念与日常生活现象相结合，让学生在实践中理解数学原理。开发了多款数学学习小游戏，使枯燥的数学练习变得趣味盎然，有效提升了学生的学习兴趣和成绩。
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="teacher-slide flex items-center justify-center p-6">
|
|
|
+ <template v-for="(item, index) in state.teacher.data">
|
|
|
<div
|
|
|
- class="card-hover w-full max-w-4xl rounded-lg bg-gray-50 p-6"
|
|
|
+ class="teacher-slide flex items-center justify-center p-6"
|
|
|
+ :class="index === 0 ? 'active' : ''"
|
|
|
>
|
|
|
- <div class="teacher-profile">
|
|
|
- <div class="teacher-avatar">
|
|
|
- <div
|
|
|
- class="mx-auto h-36 w-36 overflow-hidden rounded-full bg-gray-200"
|
|
|
- >
|
|
|
- <img
|
|
|
- src="https://picsum.photos/id/1000/200/200"
|
|
|
- alt="教师头像"
|
|
|
- class="h-full w-full object-cover"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="teacher-info">
|
|
|
- <div class="mb-2 text-2xl font-bold text-gray-800">
|
|
|
- 张老师 width: {{ ref_ccc?.clientWidth }} height:
|
|
|
- {{ ref_ccc?.clientHeight }}
|
|
|
- </div>
|
|
|
- <div class="mb-4 text-lg text-[var(--czr-main-color)]">
|
|
|
- 英语教师 | 12年教龄
|
|
|
- </div>
|
|
|
- <div class="leading-relaxed text-gray-600">
|
|
|
- 毕业于上海外国语大学，曾留学英国，擅长口语教学和应试技巧指导。教学方法新颖独特，注重培养学生的实际应用能力和跨文化交际能力。<br /><br />
|
|
|
- 张老师引入"沉浸式英语教学法"，课堂上全程使用英语授课，创造母语学习环境。编写了《中学生日常英语会话手册》，收录了1000+实用对话场景，帮助学生快速提升口语能力。所教学生英语口语平均分高于年级平均水平20%。
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <img :src="item" />
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="teacher-slide flex items-center justify-center p-6">
|
|
|
- <div
|
|
|
- class="card-hover w-full max-w-4xl rounded-lg bg-gray-50 p-6"
|
|
|
- >
|
|
|
- <div class="teacher-profile">
|
|
|
- <div class="teacher-avatar">
|
|
|
- <div
|
|
|
- class="mx-auto h-36 w-36 overflow-hidden rounded-full bg-gray-200"
|
|
|
- >
|
|
|
- <img
|
|
|
- src="https://picsum.photos/id/1003/200/200"
|
|
|
- alt="教师头像"
|
|
|
- class="h-full w-full object-cover"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="teacher-info">
|
|
|
- <div class="mb-2 text-2xl font-bold text-gray-800">
|
|
|
- 刘老师 width: {{ ref_ccc?.clientWidth }} height:
|
|
|
- {{ ref_ccc?.clientHeight }}
|
|
|
- </div>
|
|
|
- <div class="mb-4 text-lg text-[var(--czr-main-color)]">
|
|
|
- 物理教师 | 15年教龄
|
|
|
- </div>
|
|
|
- <div class="leading-relaxed text-gray-600">
|
|
|
- 毕业于清华大学物理系，教学经验丰富，多次指导学生在物理竞赛中获奖。注重理论与实践相结合，善于激发学生对科学的兴趣和探索精神。<br /><br />
|
|
|
- 刘老师创建了"趣味物理实验室"，设计了50+个家庭可做的物理实验，让学生通过动手操作理解物理原理。带领学生参加全国青少年科技创新大赛，获得多项奖项。主编的《生活中的物理学》成为学校推荐阅读书目。
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </template>
|
|
|
+ <!-- <div-->
|
|
|
+ <!-- class="teacher-slide active flex items-center justify-center p-6"-->
|
|
|
+ <!-- >-->
|
|
|
+ <!-- <div-->
|
|
|
+ <!-- class="card-hover w-full max-w-4xl rounded-lg bg-gray-50 p-6"-->
|
|
|
+ <!-- ref="ref_ccc"-->
|
|
|
+ <!-- >-->
|
|
|
+ <!-- <div class="teacher-profile">-->
|
|
|
+ <!-- <div class="teacher-avatar">-->
|
|
|
+ <!-- <div-->
|
|
|
+ <!-- class="mx-auto h-36 w-36 overflow-hidden rounded-full bg-gray-200"-->
|
|
|
+ <!-- >-->
|
|
|
+ <!-- <img-->
|
|
|
+ <!-- src="https://picsum.photos/id/1005/200/200"-->
|
|
|
+ <!-- alt="教师头像"-->
|
|
|
+ <!-- class="h-full w-full object-cover"-->
|
|
|
+ <!-- />-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- <div class="teacher-info">-->
|
|
|
+ <!-- <div class="mb-2 text-2xl font-bold text-gray-800">-->
|
|
|
+ <!-- 王老师-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- <div class="mb-4 text-lg text-[var(--czr-main-color)]">-->
|
|
|
+ <!-- 语文教师 | 10年教龄-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- <div class="leading-relaxed text-gray-600">-->
|
|
|
+ <!-- 毕业于北京师范大学中文系，曾获市级优秀教师称号，擅长文言文教学和写作指导。教学风格生动有趣，注重培养学生的文学素养和审美能力。<br /><br />-->
|
|
|
+ <!-- 在过去的教学实践中，王老师开发了"情境式文言文教学法"，通过历史场景还原和角色扮演，帮助学生深入理解古文内涵。所带班级语文平均分连续五年位列年级第一，指导的学生多次在全国作文比赛中获奖。-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- <div class="teacher-slide flex items-center justify-center p-6">-->
|
|
|
+ <!-- <div-->
|
|
|
+ <!-- class="card-hover w-full max-w-4xl rounded-lg bg-gray-50 p-6"-->
|
|
|
+ <!-- >-->
|
|
|
+ <!-- <div class="teacher-profile">-->
|
|
|
+ <!-- <div class="teacher-avatar">-->
|
|
|
+ <!-- <div-->
|
|
|
+ <!-- class="mx-auto h-36 w-36 overflow-hidden rounded-full bg-gray-200"-->
|
|
|
+ <!-- >-->
|
|
|
+ <!-- <img-->
|
|
|
+ <!-- src="https://picsum.photos/id/1010/200/200"-->
|
|
|
+ <!-- alt="教师头像"-->
|
|
|
+ <!-- class="h-full w-full object-cover"-->
|
|
|
+ <!-- />-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- <div class="teacher-info">-->
|
|
|
+ <!-- <div class="mb-2 text-2xl font-bold text-gray-800">-->
|
|
|
+ <!-- 李老师 width: {{ ref_ccc?.clientWidth }} height:-->
|
|
|
+ <!-- {{ ref_ccc?.clientHeight }}-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- <div class="mb-4 text-lg text-[var(--czr-main-color)]">-->
|
|
|
+ <!-- 数学教师 | 8年教龄-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- <div class="leading-relaxed text-gray-600">-->
|
|
|
+ <!-- 毕业于复旦大学数学系，教学风格生动有趣，注重培养学生的逻辑思维能力。曾多次指导学生参加数学竞赛并获得省级奖项，深受学生喜爱。<br /><br />-->
|
|
|
+ <!-- 李老师独创"生活化数学"教学模式，将抽象的数学概念与日常生活现象相结合，让学生在实践中理解数学原理。开发了多款数学学习小游戏，使枯燥的数学练习变得趣味盎然，有效提升了学生的学习兴趣和成绩。-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+
|
|
|
+ <!-- <div class="teacher-slide flex items-center justify-center p-6">-->
|
|
|
+ <!-- <div-->
|
|
|
+ <!-- class="card-hover w-full max-w-4xl rounded-lg bg-gray-50 p-6"-->
|
|
|
+ <!-- >-->
|
|
|
+ <!-- <div class="teacher-profile">-->
|
|
|
+ <!-- <div class="teacher-avatar">-->
|
|
|
+ <!-- <div-->
|
|
|
+ <!-- class="mx-auto h-36 w-36 overflow-hidden rounded-full bg-gray-200"-->
|
|
|
+ <!-- >-->
|
|
|
+ <!-- <img-->
|
|
|
+ <!-- src="https://picsum.photos/id/1000/200/200"-->
|
|
|
+ <!-- alt="教师头像"-->
|
|
|
+ <!-- class="h-full w-full object-cover"-->
|
|
|
+ <!-- />-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- <div class="teacher-info">-->
|
|
|
+ <!-- <div class="mb-2 text-2xl font-bold text-gray-800">-->
|
|
|
+ <!-- 张老师 width: {{ ref_ccc?.clientWidth }} height:-->
|
|
|
+ <!-- {{ ref_ccc?.clientHeight }}-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- <div class="mb-4 text-lg text-[var(--czr-main-color)]">-->
|
|
|
+ <!-- 英语教师 | 12年教龄-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- <div class="leading-relaxed text-gray-600">-->
|
|
|
+ <!-- 毕业于上海外国语大学，曾留学英国，擅长口语教学和应试技巧指导。教学方法新颖独特，注重培养学生的实际应用能力和跨文化交际能力。<br /><br />-->
|
|
|
+ <!-- 张老师引入"沉浸式英语教学法"，课堂上全程使用英语授课，创造母语学习环境。编写了《中学生日常英语会话手册》，收录了1000+实用对话场景，帮助学生快速提升口语能力。所教学生英语口语平均分高于年级平均水平20%。-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+
|
|
|
+ <!-- <div class="teacher-slide flex items-center justify-center p-6">-->
|
|
|
+ <!-- <div-->
|
|
|
+ <!-- class="card-hover w-full max-w-4xl rounded-lg bg-gray-50 p-6"-->
|
|
|
+ <!-- >-->
|
|
|
+ <!-- <div class="teacher-profile">-->
|
|
|
+ <!-- <div class="teacher-avatar">-->
|
|
|
+ <!-- <div-->
|
|
|
+ <!-- class="mx-auto h-36 w-36 overflow-hidden rounded-full bg-gray-200"-->
|
|
|
+ <!-- >-->
|
|
|
+ <!-- <img-->
|
|
|
+ <!-- src="https://picsum.photos/id/1003/200/200"-->
|
|
|
+ <!-- alt="教师头像"-->
|
|
|
+ <!-- class="h-full w-full object-cover"-->
|
|
|
+ <!-- />-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- <div class="teacher-info">-->
|
|
|
+ <!-- <div class="mb-2 text-2xl font-bold text-gray-800">-->
|
|
|
+ <!-- 刘老师 width: {{ ref_ccc?.clientWidth }} height:-->
|
|
|
+ <!-- {{ ref_ccc?.clientHeight }}-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- <div class="mb-4 text-lg text-[var(--czr-main-color)]">-->
|
|
|
+ <!-- 物理教师 | 15年教龄-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- <div class="leading-relaxed text-gray-600">-->
|
|
|
+ <!-- 毕业于清华大学物理系，教学经验丰富，多次指导学生在物理竞赛中获奖。注重理论与实践相结合，善于激发学生对科学的兴趣和探索精神。<br /><br />-->
|
|
|
+ <!-- 刘老师创建了"趣味物理实验室"，设计了50+个家庭可做的物理实验，让学生通过动手操作理解物理原理。带领学生参加全国青少年科技创新大赛，获得多项奖项。主编的《生活中的物理学》成为学校推荐阅读书目。-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
</div>
|
|
|
|
|
|
<!-- 轮播控制按钮 -->
|
|
|
@@ -326,13 +332,13 @@
|
|
|
<i class="fas fa-chevron-right text-[var(--czr-main-color)]"></i>
|
|
|
</button>
|
|
|
|
|
|
- <!-- 轮播指示器 -->
|
|
|
- <div class="carousel-indicators" id="carouselIndicators">
|
|
|
- <button class="carousel-indicator active" data-index="0"></button>
|
|
|
- <button class="carousel-indicator" data-index="1"></button>
|
|
|
- <button class="carousel-indicator" data-index="2"></button>
|
|
|
- <button class="carousel-indicator" data-index="3"></button>
|
|
|
- </div>
|
|
|
+ <!-- 轮播指示器-->
|
|
|
+ <!-- <div class="carousel-indicators" id="carouselIndicators">-->
|
|
|
+ <!-- <button class="carousel-indicator active" data-index="0"></button>-->
|
|
|
+ <!-- <button class="carousel-indicator" data-index="1"></button>-->
|
|
|
+ <!-- <button class="carousel-indicator" data-index="2"></button>-->
|
|
|
+ <!-- <button class="carousel-indicator" data-index="3"></button>-->
|
|
|
+ <!-- </div>-->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -341,11 +347,14 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { onBeforeMount, onMounted, reactive, ref } from 'vue'
|
|
|
+import { nextTick, onBeforeMount, onMounted, reactive, ref } from 'vue'
|
|
|
import StudyLayout from '@/views/study/components/study-layout.vue'
|
|
|
import topCom from './top.vue'
|
|
|
import { Hm, YM, YMD } from '@/utils/czr-util'
|
|
|
-import { trainingCampLearningPlanList } from '@/api/modules/study'
|
|
|
+import {
|
|
|
+ systemTeacherProfileImages,
|
|
|
+ trainingCampLearningPlanList,
|
|
|
+} from '@/api/modules/study'
|
|
|
import { useAppStore } from '@/stores'
|
|
|
|
|
|
const AppStore = useAppStore()
|
|
|
@@ -359,6 +368,10 @@ const state: any = reactive({
|
|
|
data: [],
|
|
|
date: YMD(new Date()),
|
|
|
},
|
|
|
+ teacher: {
|
|
|
+ loading: false,
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
query: {
|
|
|
p1: YM(new Date()),
|
|
|
p2: '2023-06-11',
|
|
|
@@ -372,107 +385,109 @@ const state: any = reactive({
|
|
|
user: null,
|
|
|
},
|
|
|
})
|
|
|
-const ref_ccc = ref()
|
|
|
const ref_month = ref()
|
|
|
const ref_date = ref()
|
|
|
const initTeacher = () => {
|
|
|
- // 教师简介轮播功能（单个老师轮播）
|
|
|
- const carousel = document.getElementById('teacherCarousel')
|
|
|
- const slides = document.querySelectorAll('.teacher-slide')
|
|
|
- const prevBtn = document.getElementById('carouselPrev')
|
|
|
- const nextBtn = document.getElementById('carouselNext')
|
|
|
- const indicators = document.querySelectorAll('.carousel-indicator')
|
|
|
-
|
|
|
- if (!carousel || !slides.length) return
|
|
|
-
|
|
|
- let currentIndex = 0
|
|
|
- const totalSlides = slides.length
|
|
|
- let slideInterval
|
|
|
-
|
|
|
- // 初始化轮播
|
|
|
- const initCarousel = () => {
|
|
|
- slides.forEach((slide, index) => {
|
|
|
- if (index !== currentIndex) {
|
|
|
- slide.classList.remove('active', 'prev', 'next')
|
|
|
- slide.classList.add('next')
|
|
|
- }
|
|
|
- })
|
|
|
- startSlideInterval()
|
|
|
- }
|
|
|
-
|
|
|
- // 显示指定索引的幻灯片
|
|
|
- const showSlide = (index) => {
|
|
|
- // 移除所有幻灯片的类
|
|
|
- slides.forEach((slide) => {
|
|
|
- slide.classList.remove('active', 'prev', 'next')
|
|
|
- })
|
|
|
-
|
|
|
- // 移除所有指示器的active类
|
|
|
- indicators.forEach((indicator) => {
|
|
|
- indicator.classList.remove('active')
|
|
|
- })
|
|
|
+ state.teacher.loading = true
|
|
|
+ systemTeacherProfileImages('TEACHER_top')
|
|
|
+ .then(({ data }: any) => {
|
|
|
+ state.teacher.data = data
|
|
|
+
|
|
|
+ nextTick(() => {
|
|
|
+ // 教师简介轮播功能（单个老师轮播）
|
|
|
+ const carousel = document.getElementById('teacherCarousel')
|
|
|
+ const slides = document.querySelectorAll('.teacher-slide')
|
|
|
+ const prevBtn = document.getElementById('carouselPrev')
|
|
|
+ const nextBtn = document.getElementById('carouselNext')
|
|
|
+ // const indicators = document.querySelectorAll('.carousel-indicator')
|
|
|
+
|
|
|
+ if (!carousel || !slides.length) return
|
|
|
+
|
|
|
+ let currentIndex = 0
|
|
|
+ const totalSlides = slides.length
|
|
|
+ let slideInterval
|
|
|
+
|
|
|
+ // 初始化轮播
|
|
|
+ const initCarousel = () => {
|
|
|
+ slides.forEach((slide, index) => {
|
|
|
+ if (index !== currentIndex) {
|
|
|
+ slide.classList.remove('active', 'prev', 'next')
|
|
|
+ slide.classList.add('next')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ startSlideInterval()
|
|
|
+ }
|
|
|
|
|
|
- // 计算前一张和后一张的索引
|
|
|
- const prevIndex = (index - 1 + totalSlides) % totalSlides
|
|
|
- const nextIndex = (index + 1) % totalSlides
|
|
|
+ // 显示指定索引的幻灯片
|
|
|
+ const showSlide = (index) => {
|
|
|
+ // 移除所有幻灯片的类
|
|
|
+ slides.forEach((slide) => {
|
|
|
+ slide.classList.remove('active', 'prev', 'next')
|
|
|
+ })
|
|
|
|
|
|
- // 为幻灯片添加相应的类
|
|
|
- slides[prevIndex].classList.add('prev')
|
|
|
- slides[index].classList.add('active')
|
|
|
- slides[nextIndex].classList.add('next')
|
|
|
+ // 移除所有指示器的active类
|
|
|
+ // indicators.forEach((indicator) => {
|
|
|
+ // indicator.classList.remove('active')
|
|
|
+ // })
|
|
|
|
|
|
- // 激活当前指示器
|
|
|
- indicators[index].classList.add('active')
|
|
|
+ // 计算前一张和后一张的索引
|
|
|
+ const prevIndex = (index - 1 + totalSlides) % totalSlides
|
|
|
+ const nextIndex = (index + 1) % totalSlides
|
|
|
|
|
|
- currentIndex = index
|
|
|
- }
|
|
|
+ // 为幻灯片添加相应的类
|
|
|
+ slides[prevIndex].classList.add('prev')
|
|
|
+ slides[index].classList.add('active')
|
|
|
+ slides[nextIndex].classList.add('next')
|
|
|
|
|
|
- // 自动轮播函数
|
|
|
- const startSlideInterval = () => {
|
|
|
- slideInterval = setInterval(() => {
|
|
|
- const nextIndex = (currentIndex + 1) % totalSlides
|
|
|
- showSlide(nextIndex)
|
|
|
- }, 5000) // 5秒切换一次
|
|
|
- }
|
|
|
+ // 激活当前指示器
|
|
|
+ // indicators[index].classList.add('active')
|
|
|
|
|
|
- // 上一张
|
|
|
- prevBtn.addEventListener('click', () => {
|
|
|
- const prevIndex = (currentIndex - 1 + totalSlides) % totalSlides
|
|
|
- showSlide(prevIndex)
|
|
|
- resetSlideInterval()
|
|
|
- })
|
|
|
-
|
|
|
- // 下一张
|
|
|
- nextBtn.addEventListener('click', () => {
|
|
|
- const nextIndex = (currentIndex + 1) % totalSlides
|
|
|
- showSlide(nextIndex)
|
|
|
- resetSlideInterval()
|
|
|
- })
|
|
|
-
|
|
|
- // 点击指示器切换幻灯片
|
|
|
- indicators.forEach((indicator, index) => {
|
|
|
- indicator.addEventListener('click', () => {
|
|
|
- showSlide(index)
|
|
|
- resetSlideInterval()
|
|
|
+ currentIndex = index
|
|
|
+ }
|
|
|
+ // 自动轮播函数
|
|
|
+ const startSlideInterval = () => {
|
|
|
+ slideInterval = setInterval(() => {
|
|
|
+ const nextIndex = (currentIndex + 1) % totalSlides
|
|
|
+ showSlide(nextIndex)
|
|
|
+ }, 5000) // 5秒切换一次
|
|
|
+ }
|
|
|
+ // 上一张
|
|
|
+ prevBtn.addEventListener('click', () => {
|
|
|
+ const prevIndex = (currentIndex - 1 + totalSlides) % totalSlides
|
|
|
+ showSlide(prevIndex)
|
|
|
+ resetSlideInterval()
|
|
|
+ })
|
|
|
+ // 下一张
|
|
|
+ nextBtn.addEventListener('click', () => {
|
|
|
+ const nextIndex = (currentIndex + 1) % totalSlides
|
|
|
+ showSlide(nextIndex)
|
|
|
+ resetSlideInterval()
|
|
|
+ })
|
|
|
+ // 点击指示器切换幻灯片
|
|
|
+ // indicators.forEach((indicator, index) => {
|
|
|
+ // indicator.addEventListener('click', () => {
|
|
|
+ // showSlide(index)
|
|
|
+ // resetSlideInterval()
|
|
|
+ // })
|
|
|
+ // })
|
|
|
+ // 鼠标悬停时暂停轮播
|
|
|
+ carousel.addEventListener('mouseenter', () => {
|
|
|
+ clearInterval(slideInterval)
|
|
|
+ })
|
|
|
+ // 鼠标离开时恢复轮播
|
|
|
+ carousel.addEventListener('mouseleave', startSlideInterval)
|
|
|
+ // 重置轮播定时器
|
|
|
+ const resetSlideInterval = () => {
|
|
|
+ clearInterval(slideInterval)
|
|
|
+ startSlideInterval()
|
|
|
+ }
|
|
|
+ // 初始化轮播
|
|
|
+ initCarousel()
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ state.teacher.loading = false
|
|
|
})
|
|
|
- })
|
|
|
-
|
|
|
- // 鼠标悬停时暂停轮播
|
|
|
- carousel.addEventListener('mouseenter', () => {
|
|
|
- clearInterval(slideInterval)
|
|
|
- })
|
|
|
-
|
|
|
- // 鼠标离开时恢复轮播
|
|
|
- carousel.addEventListener('mouseleave', startSlideInterval)
|
|
|
-
|
|
|
- // 重置轮播定时器
|
|
|
- const resetSlideInterval = () => {
|
|
|
- clearInterval(slideInterval)
|
|
|
- startSlideInterval()
|
|
|
- }
|
|
|
-
|
|
|
- // 初始化轮播
|
|
|
- initCarousel()
|
|
|
}
|
|
|
const initTopHistory = () => {
|
|
|
const arr: any = []
|
taiji_caozhaorui