js原生轮播图plus

因为最近在vue，想多加练习，这个轮播图的代码是在vue的脚手架里写的，把它拆解起来，写在html原理一样，基本功能实现了，唯一美中不足的就是轮播图一开始不是自动播放的，需要鼠标在图片上划过一次才能自动播放，如果用原生js代码写的话，用windoes.onload和init，建立定时器，然后清除等操作可以实现自动播放，和鼠标放在上面后停止播放功能，遇到的问题就是，vue加载页面自动开始触发的定时器写在mounted中，但是将定时器销毁，只能写在钩子函数befdestroy和destroy中才能销毁（我感觉是）中间需要鼠标放在图片上停止定时器实现不了，对vue的生命周期函数理解的还是不够，以后还得多多练习。
上面的gif本人制作的，觉得毕竟酷炫的可以百度screentogit，下载，最好的电脑屏幕gif制作软件，没有之一

[/code][code]

复制代码

1/3

复制代码

我是第1张照片

复制代码

2/3

复制代码

我是第2张照片

复制代码

3/3

复制代码

我是第3张照片

复制代码

[/code][code]

复制代码

[/code][code]export default {

复制代码

name:"lunbopluse",

复制代码

data(){

复制代码

return{

复制代码

picsIndex:1,

复制代码

timer:""

复制代码

}

复制代码

},

复制代码

methods: {

复制代码

onStyle(){

复制代码

clearInterval(this.timer);

复制代码

document.getElementsByClassName('text').style.left = '40%';

复制代码

},

复制代码

outStyle(){

复制代码

this.timer = setInterval(() => {this.showpic(1);},2000);

复制代码

},

复制代码

nowshowpic(n){

复制代码

this.pic(this.picsIndex = n)

复制代码

},

复制代码

showpic(n){

复制代码

this.nowshowpic(this.picsIndex + n)

复制代码

},

复制代码

pic(){

复制代码

let pics = document.getElementsByClassName('pics');

复制代码

let dots = document.getElementsByClassName('dot');

复制代码

if(this.picsIndex > pics.length){

复制代码

this.picsIndex = 1;

复制代码

};

复制代码

if(this.picsIndex < 1){

复制代码

this.picsIndex = pics.length;

复制代码

};

复制代码

[code] for(let i=0;i

js原生轮播图plus

浏览过的版块