Vue 实现商品详情多播图(点击图片列表轮播图)

Vue 实现商品详情多播图(点击轮播图)

之前弄商城项目有要到这种效果的商品展示图(商品图片轮播)，找了很久没找到，就自己写了一个。

实现效果：

点击左右按钮图片左右移动
点击小图片图片展示到大图
图片移动到最后直接回滚到第一张

直接上图：

HTML代码：

<template><div><div style="width:800px;height:800px;margin:20px 0 0 700px;"><div style="width:400px;height:400px"><img :src="mainImgUrl" style="width:100%;height:100%"></div><div><i style="font-size: 30px;display: inline-block;position: relative;top: 40px;cursor: pointer;" class="el-icon-arrow-left" @click="imgLeft()"></i><ul class="Img_ul"><li v-for="(item,index) in imgUrlList" :key="index" class="Img_li" :style="imgStyle" @click="changeImg(item, index)"><img :class="index === imgActiveIndex ? 'img_activeBorder' : ''" :src="item" style="width:50px;height:50px"></li></ul><i style="font-size: 30px;display: inline-block;position: relative;left: 370px;top: -50px;cursor: pointer;" class="el-icon-arrow-right" @click="imgRight()"></i></div></div></div>
</template>

JavaScript代码：

<script>
export default {data () {return {mainImgUrl: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',imgUrlList: ['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg','https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg','https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg','https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg','https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg','https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg','https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg','https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg','https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg','https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg','https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg'],imgActiveIndex: 0, // 当前移动图片的索引值imgDistance: 0, // 移动的距离allDistance: 0, // 总移动距离}},computed: {imgStyle() {return {transform: `translate3d(${this.imgDistance}px, 0, 0)` // 计算移动的距离(x,y,z)}}},methods: {changeImg(item, index) {this.mainImgUrl = itemthis.imgActiveIndex = index},imgLeft() {if (this.imgActiveIndex > 0) {this.imgActiveIndex--  // 索引值-1this.imgUrlList.forEach((item, index) => { // 循环小图,通过判断索引值赋值给大图if (this.imgActiveIndex === index) {this.mainImgUrl = item}})}if (this.imgActiveIndex >= 4) {var index = 0const temp = window.setInterval(() => { // 利用定时器实现图片左右移动的动画效果if (index < 33) { // 移动次数(33次)this.imgDistance += 2 // 每次向左移动的距离 (移动总距离为33*this.imgDistance)index++return} else {window.clearInterval(temp) // 移动完清除定时器}}, 10)}},imgRight() {if (this.imgActiveIndex < this.imgUrlList.length - 1) {this.imgActiveIndex++this.imgUrlList.forEach((item, index) => {if (this.imgActiveIndex === index) {this.mainImgUrl = item}})if (this.imgActiveIndex >= 5) {this.allDistance = -66 * (this.imgActiveIndex - 4)var index = 0const temp = window.setInterval(() => {if (index < 33) {this.imgDistance -= 2 // 每次向右移动的距离index++return} else {window.clearInterval(temp)}}, 10)}} else if (this.imgActiveIndex === this.imgUrlList.length - 1) { // 到达最后一张图片，再点击跳转回第一张this.imgActiveIndex = 0;this.mainImgUrl = this.imgUrlList[0]var index = 0const temp = window.setInterval(() => { // 利用定时器实现图片左右移动的动画效果if (index < Math.abs(this.allDistance/2)) { // 取绝对值再除this.imgDistance += 2 // 每次向左移动的距离 (移动总距离为33*this.imgDistance)index++return} else {window.clearInterval(temp) // 移动完清除定时器}}, 1)}}}
}
</script>

CSS代码：

<style scoped>
.Img_ul{position: relative;display: flex;left: 36px;width: 322px;height: 50px;overflow: hidden;list-style: none;
}
.Img_li{float:left;margin: 0 8px;cursor: pointer;
}
.img_activeBorder{border: 3px solid #0dcc73;
}
</style>

呼…总算是完成了。算是在自己的代码生涯又前进了一步吧。继续加油！！！

Vue 实现商品详情多播图(点击图片列表轮播图)相关推荐

仿淘宝商品详情页[带有视频和图片的轮播功能]
因为工作需求的原因,自己写了一个demo,既实现了功能,又能与大家分享,很高兴!Demo已上传GitHub,https://github.com/xinniangdeweidao/CloneTaoba ...
仿京东淘宝商品详情页中视频和图片的轮播功能
还没有学会如何上传视频到博客上,先上传图片吧案例下载地址: https://download.csdn.net/download/dawnzeng/10430298 视频播放借用了饺子播放器,最主要 ...
纯css就能实现可点击切换的轮播图，feel起来很丝滑
前言轮播图经常会在项目里用到,但是实际上用到的轮播图都是比较简单的,没有复杂的特效,这个时候如果去引入swiper那些库的话,未免就有点杀鸡焉用牛刀了. 所以不如自己手写一个,而今天我要分享的一种写 ...
点击左侧导航轮播图定位轮播图导航
点击左侧导航轮播图定位 <template><div class="service_contain"><Spin size="large& ...
html菜鸟教程轮播图自动播放,如何实现轮播图？
1.背景介绍轮播图,是由网页banner进化而来,通常放在屏幕最显眼的位置,以大图显示.随着互联网的发展,网页中需要推广的信息越来越多,宣传信息都欲占据黄金位置,最后相互妥协,轮播图应运而生.总而言 ...
html按钮轮播图,四种方式实现轮播图
不论是app,还是网站,基本上都会出现轮播图,今天和大家分享几种不同工具实现轮播图的几种方式. 轮播图的基本样式和功能就不需要解释了,相信能根据题目选择看文章的话都知道啥是轮播图,如果哪位读者老爷真的 ...
android在Fragment做轮播图,Android Fragment沉浸式轮播图
所谓的沉浸式轮播图,指的是轮播图位于状态栏后面,这是最近比较流行的一种设计方式,在电商客户端上面用的比较多.比如下面的京东Android客户端首页: 京东首页 Android 从Android4.4开 ...
html原生轮播图的实现,使用原生js实现点击切换图片（轮播图）效果
要实现的功能大致为: 点击两边的切换按钮,可以按顺序切换不同的图片具体操作如下: 一.布局html 1.添加一个div容器 2.添加一个轮播图img标签 3.添加两个按钮img标签二.css样式设 ...
轮播图的实现，点击按钮切换轮播图等功能
菜单区域实现划过主菜单显示子菜单轮播区域实现 1.点击图片中左右箭头,分别跳转上一张与下一张 (1)点击上一张图其实就是让一个变量进行递减,点击下一张图就是让变量递增:(控制索引最大最小值) 2. ...

Vue 实现商品详情多播图(点击图片列表轮播图)

Vue 实现商品详情多播图(点击轮播图)

Vue 实现商品详情多播图(点击图片列表轮播图)相关推荐

最新文章

热门文章