Vue实现图片轮播组件思路及实例解析
程序员文章站
2022-03-20 17:39:33
1、先看效果:熟悉的图片轮播,只要是个网站,百分之90以上会有个图片轮播。我认为使用图片轮播。第一可以给人以一种美观的感受,而不会显得网站那么呆板,第二可以增加显示内容,同样的区域可以显示更多内容。 ...
1、先看效果:
熟悉的图片轮播,只要是个网站,百分之90以上会有个图片轮播。我认为使用图片轮播。
第一可以给人以一种美观的感受,而不会显得网站那么呆板,
第二可以增加显示内容,同样的区域可以显示更多内容。
2、每学一个新东西 ,图片轮播都是很好的练手案例,而且,也很实用。
3、基本要求:页面加载,自动播放。鼠标悬停,停止播放。鼠标离开,继续播放
点击左右箭头切换上一张,下一张图片。
下方小圆点显示当前位第几张图片。
4、使用vue实现
5、示例代码
结构html:
<template> <div id="slider"> <div class="window" @mouseover="stop" @mouseleave="play"> <ul class="container" :style="containerstyle"> <li> <img :style="{width:imgwidth+'px'}" :src="sliders[sliders.length - 1].img" alt=""> </li> <li v-for="(item, index) in sliders" :key="index"> <img :style="{width:imgwidth+'px'}" :src="item.img" alt=""> </li> <li> <img :style="{width:imgwidth+'px'}" :src="sliders[0].img" alt=""> </li> </ul> <ul class="direction"> <li class="left" @click="move(600, 1, speed)"> <svg class="icon" width="30px" height="30.00px" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="m481.233 904c8.189 0 16.379-3.124 22.628-9.372 12.496-12.497 12.496-32.759 0-45.256l166.488 512l337.373-337.373c12.496-12.497 12.496-32.758 0-45.255-12.498-12.497-32.758-12.497-45.256 0l-360 360c-12.496 12.497-12.496 32.758 0 45.255l360 360c6.249 6.249 14.439 9.373 22.628 9.373z" /></svg> </li> <li class="right" @click="move(600, -1, speed)"> <svg class="icon" width="30px" height="30.00px" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="m557.179 904c-8.189 0-16.379-3.124-22.628-9.372-12.496-12.497-12.496-32.759 0-45.256l871.924 512 534.551 174.627c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0l360 360c12.496 12.497 12.496 32.758 0 45.255l-360 360c-6.249 6.249-14.439 9.373-22.628 9.373z" /></svg> </li> </ul> <ul class="dots"> <li v-for="(dot, i) in sliders" :key="i" :class="{dotted: i === (currentindex-1)}" @click = jump(i+1) > </li> </ul> </div> </div> </template>
css部分:
*{ box-sizing: border-box; margin:0; padding:0; } ol,ul{ list-style: none; } #slider{ text-align: center; } .window{ position:relative; width:600px; height:400px; margin:0 auto; overflow:hidden; } .container{ display:flex; position:absolute; } .left, .right{ position:absolute; top:50%; transform:translatey(-50%); width:50px; height:50px; background-color:rgba(0,0,0,.3); border-radius:50%; cursor:pointer; } .left{ left:3%; padding-left:12px; padding-top:10px; } .right{ right:3%; padding-right:12px; padding-top:10px; } img{ user-select: none; } .dots{ position:absolute; bottom:10px; left:50%; transform:translatex(-50%); } .dots li{ display:inline-block; width:15px; height:15px; margin:0 3px; border:1px solid white; border-radius:50%; background-color:#333; cursor:pointer; } .dots .dotted{ background-color:orange; }
javascript部分:
script> export default { name: 'slider', props: { initialspeed: { type: number, default: 30 }, initialinterval: { type: number, default: 3 } }, data () { return { sliders:[ { img:'http://img.hb.aicdn.com/adbde61e4343dedd21e97ea7f22666825a8db7d077ffe-qn8pjn_fw658' }, { img:'http://img.hb.aicdn.com/adeed7d28df6e776c2fa6032579c697381d1a82b7fe00-fwrqgn_fw658' }, { img:'http://img.hb.aicdn.com/ab7f48509b3c0353017d9a85ef1d12400c9b2724540d4-p3zouo_fw658' }, { img:'http://img.hb.aicdn.com/60f788fc2a846192f224b9e6d4904b30e54926211d3d67-acfj9g_fw658' }, { img:'http://img.hb.aicdn.com/22ded455284aab361b8d2056e82f74a891a019704296a-psraeb_fw658' }, ], imgwidth:600, currentindex:1, distance:-600, transitionend: true, speed: this.initialspeed } }, computed:{ containerstyle() { return { transform:`translate3d(${this.distance}px, 0, 0)` } }, interval() { return this.initialinterval * 1000 } }, mounted() { this.init() }, methods:{ init() { this.play() window.onblur = function() { this.stop() }.bind(this) window.onfocus = function() { this.play() }.bind(this) }, move(offset, direction, speed) { console.log(speed) if (!this.transitionend) return this.transitionend = false direction === -1 ? this.currentindex += offset/600 : this.currentindex -= offset/600 if (this.currentindex > 5) this.currentindex = 1 if (this.currentindex < 1) this.currentindex = 5 const destination = this.distance + offset * direction this.animate(destination, direction, speed) }, animate(des, direc, speed) { if (this.temp) { window.clearinterval(this.temp); this.temp = null ; } this.temp = window.setinterval(() => { if ((direc === -1 && des < this.distance) || (direc === 1 && des > this.distance)) { this.distance += speed * direc } else { this.transitionend = true window.clearinterval(this.temp) this.distance = des if (des < -3000) this.distance = -600 if (des > -600) this.distance = -3000 } }, 20) }, jump(index) { const direction = index - this.currentindex >= 0 ? -1 : 1; const offset = math.abs(index - this.currentindex) * 600; const jumpspeed = math.abs(index - this.currentindex) === 0 ? this.speed : math.abs(index - this.currentindex) * this.speed ; this.move(offset, direction, jumpspeed) }, play() { if (this.timer) { window.clearinterval(this.timer) this.timer = null } this.timer = window.setinterval(() => { this.move(600, -1, this.speed) }, this.interval) }, stop() { window.clearinterval(this.timer) this.timer = null } } } </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。