vue实现图片轮播二

直接上代码吧
包含了鼠标放入移出，点击上一张下一张，自动播放。
还没做拖拽前进后退。
图片的切换部分是想模拟一个1/x的这么一个切换速度的曲线。

<template><div class="hello" @mouseover="mouseonmeth" @mouseout="mouseoutmeth"><div class='imgtransdiv' :style="changeX" draggable="true" @dragstart="dragEnterEvent($event)" @dragend="dragEnterOver"><div v-for="(data, index) in nowslides" :key="index" ><img :src="data.src" /></div></div><div class='leftbtn changebtn' @click='preclick'> < </div><div class='rightbtn changebtn' @click='nextclick'> > </div></div>
</template><script>
export default {name: 'HelloWorld',data () {return {nowIndex: 0,changenum:0,changespeed: 8,changespeedstart: 0,changeX: "transform: translateX(0px)",slides: [{src: require('../assets/logo.png')},{src: require('../assets/20190726150130.png')},{src: require('../assets/logo.png')},{src: require('../assets/20190726150130.png')}],nowslides:[],imgchangeinter:null,ismouseon: false,imgchangeout:null,dragstart:0}},methods: {changimgnext(){if(this.imgchangeinter){return ;}if(this.nowIndex >= this.slides.length-1){this.nowIndex = 0;}else{this.nowIndex += 1;}this.nowslides.push(this.slides[this.nowIndex]);this.imgchangeinter = setInterval(()=>{this.changenum -= 180/this.changespeed;this.changeX = `transform: translateX(${this.changenum}px)`;this.changespeed += 1;if(this.changenum < -400){this.changespeed = this.changespeedstart;clearInterval(this.imgchangeinter);this.imgchangeinter = null;this.nowslides.shift();this.changenum = 0;this.changeX = `transform: translateX(${this.changenum}px)`;}}, 16);},changImgpre(){if(this.imgchangeinter){return ;}if(this.nowIndex <= 0){this.nowIndex = this.slides.length - 1;}else{this.nowIndex -= 1;}this.nowslides.unshift(this.slides[this.nowIndex]);this.changeX = `transform: translateX(-400px)`;this.imgchangeinter = setInterval(()=>{this.changenum += 180/this.changespeed;this.changeX = `transform: translateX(${this.changenum-400}px)`;this.changespeed += 1;if(this.changenum > 400){this.changespeed = this.changespeedstart;clearInterval(this.imgchangeinter);this.imgchangeinter = null;this.nowslides.pop();this.changenum = 0;this.changeX = `transform: translateX(${this.changenum}px)`;}}, 16);},changImg(){if(this.imgchangeout){return;}this.imgchangeout = setInterval(()=>{this.changimgnext();}, 2000);},preclick(){this.changImgpre();},nextclick(){this.changimgnext();},mouseoutmeth(){this.changImg();},mouseonmeth(){clearInterval(this.imgchangeout);this.imgchangeout = null;},dragEnterEvent(event) {this.dragstart = event.clientX;//console.log('drag', event.clientX);},dragEnterOver(event) {event.dataTransfer.clearData();//console.log('dragEnterOver');if(this.dragstart - event.clientX < 0){console.log("pre");}else{console.log("next");}}},created(){this.nowslides.push(this.slides[0]);this.changespeedstart = this.changespeed;},mounted () {this.changImg();}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>.hello{width: 400px;height: 400px;overflow: hidden;position: relative;}.imgtransdiv{width: 400px;height: 400px;display: flex;flex-wrap: nowrap;}.imgtransdiv div{flex-shrink: 0;width: 100%;height: 100%;}.imgtransdiv div img{width: 100%;}.changebtn{color: black;position: absolute;top: 50%;font-size: 50px;background-color: rgba(255,255,255,0.5);cursor: pointer;}.rightbtn{right: 0;}
</style>

vue实现图片轮播二相关推荐

vue 实现无限轮播_使用Vue制作图片轮播组件思路详解
之前一直都没有认真的写过一个组件.以前在写业务代码的过程中,都是用的别人封装好的组件,这次尝试着写了一个图片轮播组件,虽然比不上知名的轮播组件,但它的功能基本完整,而且在写这个组件的过程中,学的东西也 ...
基于vue商品图片轮播和放大镜的方案
实现原理放大镜的原理用一句话概括,就是根据小图上的鼠标位置去定位大图. 原理图(以2倍放大为例) 相信原理图已经画的很明白了, 图中,左侧框是小图框,其蓝色区域为图片遮罩层(需放大区域),右侧框是整 ...
3d饼图 vue_这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper
介绍在Web网页开发中,我们经常需要用到图片轮播,在以往传统的开发方式中有很多基于jquery的插件可供使用,但是随着目前各类前端框架层出不穷的现状,在某些方面特别是针对特定的场景,还是有不少地方不 ...
利用swiper在vue中做轮播图，并改变轮播图的原有箭头、图片等内容
目标:利用swiper在vue中做轮播图,并改变轮播图的原有箭头.图片等内容. 实现效果:1.点击左右箭头可切换图片. 2.点击后图片出现最左侧样式效果,只有被点击的图片有此效果,不被点击恢复默认效果 ...
web大二实训作业：校园运动会网站设计——运动会图片轮播图片遮罩特效(4页)体育 HTML+CSS+JavaScript HTML5期末大作业...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
Vue——图片轮播组件
Notices: 这是我一个项目中的一个子组件,要展示的数据.图片地址等的都在父组件data中.所以后面的讲述都是基于从父组件获取的参数进行处理.(如需将这个SlideShow写成一个单独的主组件,将 ...
jQuery（二）图片轮播与放大显示
效果图如下思路分析 1.图片轮播,将第一个图片向左移动80px(一个图片的宽度),完成动画以后的回调函数,改变图片的marginLeft值,追加到最后一张图片后,使用计时器依次循环播放图片. //图 ...
Axure教程-Banner图片轮播（二）-热区与条件判断
在<Axure教程 Banner图片轮播(一)>基础上增加图片切换按钮. 效果: 轮播2 元件:动态面板和热区步骤: 1,继续添加动态面反,设置如下: 2,在state1中添加添加三个& ...
vue 实现无限轮播_用vue写一个轮播图效果
轮播图在网站中几乎无处不在,占用地方少,交互性好.今天就来聊聊如何用vue实现一个轮播效果. 一.原理在轮播图数组dataList中,定义一个变量currentIndex = 0表示第一张图片,默认 ...

vue实现图片轮播二

vue实现图片轮播二相关推荐

最新文章

热门文章