这篇文章主要介绍了Vue实现图片轮播组件思路及实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
1、先看
熟悉的图片轮播，只要是个网站，百分之90以上会有个图片轮播。我认为使用图片轮播。
第一可以给人以一种美观的感受，而不会显得网站那么呆板，
第二可以增加显示内容，同样的区域可以显示更多内容。
2、每学一个新东西 ，图片轮播都是很好的练手案例，而且，也很实用。
3、基本要求：页面加载，自动播放。鼠标悬停，停止播放。鼠标离开，继续播放
点击左右箭头切换上一张，下一张图片。
下方小圆点显示当前位第几张图片。
4、使用Vue实现
5、示例代码
结构html：
<div id="slider"> <div class="window"> <ul class="container"> <li> </li><li> </li><li> </li></ul><ul class="direction"> <li class="left"> </li><li class="right"> </li></ul><ul class="dots"> <li> </li></ul></div></div>
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:5<a style="color:transparent">本文来源gao($daima.com搞@代@#码(网5</a>0%; 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 { if ((direc === -1 && des this.distance)) { this.distance += speed * direc } else { this.transitionEnd = true window.clearInterval(this.temp) this.distance = des 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 } } }
以上就是Vue实现图片轮播组件思路及实例解析的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Vue实现图片轮播组件思路及实例解析
转载请注明原文链接：Vue实现图片轮播组件思路及实例解析
