使用javascript实现简单的轮播图效果

秒速五厘米 2022-06-05 23:40 257阅读 0赞

最近在做公司的网站，有一个轮播图的功能，网上倒是有现成的js组件，我用了一下swiper,但是发现嵌入进去时不太好用，好在公司的网站要求也不是很高，索性就使用纯的js做一下呗。

1.首先新建一个html页面，先把简单的布局做出来

我的html部分如下

就做一个轮播图，为一个div,,其中轮播图中用到的三个图片用ul, 下面的ol 为轮播图索引的数字

接下来，就是对此布局进行css的样式，思路就是 外层div（wrap）的宽度跟图片li的宽度设置一样，然后整个wrap部分的overflow设置为hidden, 设置为不可见，（我这里是最简单的轮播图的实现，很适合初学者的使用）就用到了display属性的none和block的切换来实现轮播图，其他的用绝对定位，或者margin值做也是可以的，但我这里用最简单的实现，下面是我的css部分

这里html部分和css部分不是重点，我这里不做说明了。

终点是接下来的javascript部分，先贴上完整的javascript代码部分

这里用到了js的定时器，说到定时器，先来了解一下js中的两种定时器，

1.setTimeout(function, interval)

2.setInterval(function, interval)

这里直接粘一下网友写的区别吧

# [关于js中两种定时器的设置及清除][js] #

# 1、JS中的定时器有两种： #

window.setTimeout([function],[interval]) 设置一个定时器,并且设定了一个等待的时间[interval],当到达时间后,执行对应的方法[function],当方法执行完成定时器停止(但是定时器还在,只不过没用了);
    
    window.setInterval([function],[interval]) 设置一个定时器,并且设定了一个等待的时间[interval],当到达时间后,执行对应的方法[function],当方法执行完成,定时器并没有停止,以后每隔[interval]这么长的时间都会重新的执行对应的方法[function],直到我们手动清除定时器为止;
    
    2、JS中的定时器是有返回值的:->返回值是一个数字,代表当前是第几个定时器 
       var timer1=window.setTimeout(function(){},1000);  //timer1->1 当前是第一个定时器

var timer2=window.setTimeout(function(){},1000);  //timer2->2 当前是第二个定时器

window.clearTimeout(timer1); //->把第一个定时器清除掉,这里也可以用window.clearInterval(timer1)、window.clearTimeout(1)、window.clearInterval(timer1);

var timer3=window.setTimeout(function(){},1000);   //timer3->3 当前是第三个定时器 ,虽然上面的定时器timer1清除掉了,但是号还是继续往后排的;

# 3、清除定时器： #

window.clearInterval(timer1)/window.clearTimeout(time1)；两种清除方式都可以清除通过setTimeout和setInterval设置的定时器(两种方式在设置定时器的时候有区别，清除定时器的时候没有区别)，并且参数不仅可以是timer，还可以是其返回值，例如1,2；需要注意的是，定时器即使清除了，其返回值也不会清除，之后设置的定时器的返回值也会在其返回值的基础上继续向后排，这点类似于银行的排队领号，即使1号的业务办理完了，后边的人仍是从2号开始继续领号，而不是重新从1开始；

总结：setTimeout 用一次（主要用于延时做某件事）

setInterval  主要用来循环做某件事

两者的使用场景不同， 这里粘一下 上面的地址：http://www.cnblogs.com/wangying731/p/5164780.html

好了说完定时器，下面就来说一说我这里轮播图的实现吧！

一。我这里用到的是过程式编程，没有用到抽象式编程

二。刚开始都是使用js来获取一些元素，这里不做介绍

三。分步骤实现

1.先实现 循环轮播

init()函数中的 这一句：

timer1 = setInterval(autoPlay, 5000);

使用定时器先将 pics中的所有图片隐藏，在使用索引index来定时显示 图片 每执行一次index的值通过++index 加1   这里使用index++不行 这里的index为全局变量

这样简单的自动轮播的功能就出来了，

接下来，再做图片索引的鼠标移入事件，鼠标移入哪个索引值，就显示哪个图片，

//数字索引的鼠标进入时间
    				for(var i=0;i<listNumLi.length;i++){
    					listNumLi[i].idx = i;
    					listNumLi[i].onmouseover = function(){
    						clearInterval(timer1);
    						clearInterval(timer2);
    						index = this.idx;
    						changePic(this.idx);
    					}
    				}

接下来写wrap区域的鼠标一出事件，将 timer清理掉，我第一次在这里全篇只写了一个timer ,就是init()函数中创建的也是

timer = setInterval(autoPlay, 5000);

listNum鼠标移入事件中创建的也是timer = setInterval(autoPlay, 5000);

所以在wrap区域的鼠标移除事件清楚地是timer ,具体代码如下：

这样做的后果是，有时候wrap区域的鼠标移入时，定时器没有清理掉，导致鼠标已经放上轮播图的图片了，但是定时器还在执行，就是过一会儿轮播图的图片还是会变，这样就不行。

因为init()函数中的timer和鼠标移入数字索引时创建的timer有可能不一样，故没有清理掉，所以在代码中这两处创建不同的timer,然后再清理的时候把这两个timer都清理掉。具体代码如下：（完整的javascript代码）

这样下来，一个简单的轮播图效果就做完了，只包含两个简单的功能：

1.定时轮播

2.鼠标移入轮播图数字所以区域时，对应的图片显示

但是 用鼠标拖动图片的功能还没有，下次有机会再展示吧

不积跬步，无以至千里

不积小流，无以成江海