友情链接网站源码,中关村在线电脑官网,网站群管理建设,扬州个人做网站1、轮播图部分#xff0c;右边鼠标移入#xff0c;左边对应展示轮播图 可以在swiper 官网 Swiper中文网-轮播图幻灯片js插件,H5页面前端开发 选择vue中使用swiper npm i swiper 左右两边的联动#xff1a;左边的轮播图和右边的小的列表他们的列表组成结构是一样的#…1、轮播图部分右边鼠标移入左边对应展示轮播图 可以在swiper 官网 Swiper中文网-轮播图幻灯片js插件,H5页面前端开发 选择vue中使用swiper npm i swiper 左右两边的联动左边的轮播图和右边的小的列表他们的列表组成结构是一样的都是一样的数组这样才能够在右边鼠标移入的时候获取到下标与左边的下标相对应 找到对应的元素。 2.右侧鼠标移入高亮 通过视频可以看出鼠标高亮部分 紫色背景没有被其他的图片所盖住而是展示在了上面的位置因此给每一个列表都单独添加一个div盒子来写紫色高亮部分使用绝对定位来决定盒子的位置在通过z-index 来控制盒子里面的内容层级关系通过index属性来进行判断是否紫色盒子是否展示的问题。 templatediv styledisplay: flexdiv classcontainerdiv classcontainer-bgdiv classcontainer-nr!-- 左边轮播图--div classnr-leftswiperswipersetControlledSwiper:modulesmodules:slides-per-view1:space-between50initialSlide0:autoplay{ delay: 2500, disableOnInteraction: false }navigation:pagination{ clickable: true }:scrollbar{ draggable: true }swiper-slide v-for(item, index) in listdiv classswiper-itemimg :srcitem.img /div classimg-introducediv classtitle{{ item.title }}/divdiv classcontent{{ item.content }}/div/div/div/swiper-slide/swiper/div!-- 右边轮播图--div classnr-rightdiv:class[nr-right-list, { activeList: activeList index }]v-for(item, index) in listmouseenteronmouseenter(index)div classnr-right-dc v-showactiveList index/divdiv classnr-right-contentdiv classnr-right-list-left{{ item.title }}/divdiv classnr-right-list-rightimg stylewidth: 150px; height: 125px :srcitem.img //div/div/div/div/div/div/div/div /template script setup // 导入需要的模块 自动播放导航模块分页滚动条模式辅助功能模块 import { Autoplay, Navigation, Pagination, Scrollbar, A11y } from swiper/modules import { Swiper, SwiperSlide } from swiper/vue // 引入swiper 相关的样式 import swiper/css import swiper/css/navigation import swiper/css/pagination import swiper/css/scrollbar import swiper/css/autoplay import { onMounted, ref } from vue const activeList ref(0) const modules ref([Autoplay, Navigation, Pagination, Scrollbar, A11y]) // 用来获取swiper 组件实例 const mySwiper ref(null) // swiper 组件以及右边列表轮播图 数组 const list ref([{img: https://img2.baidu.com/it/u248779163,487887586fm253fmtautoapp138fJPEG?w889h500,title: 2024年畅销榜图书推荐,content: 当地时间2024年12月12日上午2024世界慕课与世界大会在美国举办},{img: https://img1.baidu.com/it/u2351041742,3087776587fm253fmtautoapp138fJPEG?w800h500,title: 2025年度最受欢迎人气作家,content: 清华大学等你投票},{img: https://img1.baidu.com/it/u3275395028,3906211172fm253fmtautoapp138fJPEG?w800h500,title: 2025年度热搜排行榜},{img: https://img2.baidu.com/it/u4052861714,3377805952fm253fmtautoapp138fJPEG?w800h500,title: 2024世界慕课在线教育大会在伦敦举行} ])// 初始化 默认第一个轮播图高亮是第一个元素 onMounted(() {mouseEvent(0) })// 用来获取swiper 组件实例 const setControlledSwiper (swiper) {mySwiper.value swiper }// 鼠标移入事件 const onmouseenter (index) {mouseEvent(index) } // 通用事件初始化以及鼠标移入的时候共同调用 const mouseEvent (index) {// 获取高亮的indexactiveList.value index// 获取右边轮播图高亮块元素let imgList document.getElementsByClassName(nr-right-dc)// 获取右边轮播图元素的内容盒子let imgContent document.getElementsByClassName(nr-right-content)// 由于获取到的是伪数组通过Array.from 进行转化var elementsArray Array.from(imgList)var imgContentArray Array.from(imgContent)// 进行循环 调整层级关系elementsArray.forEach((item, i) {if (i index) {item.style.zIndex 52} else {item.style.zIndex 50}})imgContentArray.forEach((item, i) {if (i index) {item.style.zIndex 53} else {item.style.zIndex 51}})// slideTo跳转到指定的swiper轮播图mySwiper.value.slideTo(index) } /script style langscss .container {width: 1000px;height: 500px;margin-right: 10px;margin-left: 40px;.container-bg {width: 1000px;height: 500px;background: linear-gradient(45deg, #791cb5 60%, transparent);margin-left: 30px;position: relative;}.container-nr {width: 1000px;height: 500px;position: absolute;background: #eeeeee;left: -40px;top: 40px;display: flex;.nr-left {width: 700px;height: 500px;cursor: pointer;}.nr-right {width: 300px;height: 500px;cursor: pointer;.nr-right-list {width: 100%;height: 125px;display: flex;position: relative;.nr-right-dc {width: 330px;height: 138px;background-color: #8c3cbf;position: absolute;left: -23px;top: -5px;z-index: 50;}.nr-right-content {position: absolute;display: flex;z-index: 51;}.nr-right-list-left {width: 150px;height: 125px;font-weight: bold;box-sizing: border-box;padding: 10px;font-size: 12px;}.nr-right-list-right {width: 100px;height: 125px;}}}} } .swiper-item {position: relative;.img-introduce {color: #ffffff;position: absolute;bottom: 3px;left: 0px;width: 700px;height: 70px;box-sizing: border-box;padding: 10px;font-weight: bold;background: linear-gradient(to top, #2b0c35, transparent);.title {margin-bottom: 9px;}.content {font-size: 8px;font-weight: normal;}} } .box {width: 300px;height: 700px;background-color: #f2f3f9;.content-box {width: 300px;height: 600px;position: relative;left: -20px;top: 20px;background: linear-gradient(135deg, #791cb5 60%, transparent);animation: toLeave 1s linear;}.content-title {position: relative;font-weight: bold;left: -20px;top: 20px;}.box-title {display: flex;.box-title-style {position: relative;}}keyframes toHeight {0% {width: 0px;}100% {width: 40px;}}.active {background-color: #791cb5;color: #ffffff !important;position: relative;}.active::before {position: absolute;left: 0;top: 50%;transform: translateY(-50%) scaleY(0.5);content: ;height: 1px;width: 40px;background: #ffffff;animation: toHeight 1s linear;}keyframes toLeave {0% {height: 0px;}100% {height: 600px;}} } .activeList {color: #ffffff; } /style