如何使用JS实现轮播图

简介: 如何使用JS实现轮播图

当我们开始学习js后,终于要实现更加完善的轮播图了。但是这时我们难免会有些没有思路,所以我在此为大家提供一些轮播图的思路。

首先,我们想要做轮播图,需要了解一些所需要的相关方法。

window.setTimeout():

这个方法的意义是在设定时间过后执行目标函数。

这个方法有两个参数。第一个:传入一个function,用来设定执行的目标函数;第二个:传入一个数字(单位:毫秒)设定多久后执行目标函数。

取得元素节点对象的相关方法

document.getElementsByxxx()

通过元素类名/ID/标签名等获取.

document.querySelector() or document.querySelectorAll()

通过选择器选取(传入一个字符串,字符串里写选择器,注意一定要按选择器的形式来写),前者仅选择第一个元素,后者选取所有元素。

注意:无论是那种方法取得的是多个元素,其返回的都是一种“伪数组”。伪数组就是你可以像数组一样通过索引来取得元素,例如:document.getElementsByClassName("a")[0]但是 不能使用数组的方法(因为不是数组,所以肯定不能用)。

轮播图原理

上面我们先了解了一些实现轮播图可能会用到的方法。现在我们来聊一下轮播图的原理。

实现轮播图,我们肯定要修改其css属性,如何修改就要看轮播图的实现方式。

我通过正常的轮播图来举例:通过修改内层盒子的margin-left值来使内层盒子相对外层盒子运动,从而实现轮播图效果。

相信对于轮播图效果的实现大家都能快速理解,且对于其他类型诸如渐入渐出轮播图等都是差不多的。就算实现自动切换,也不过是设置一个动画的事罢了。但是难点就在于把手动切换和自动切换结合在一起,这时就会有难点产生。

首先,如果使用动画来使轮播图自动切换,是无法再进行手动切换的。所以我们就需要通过js来实现其自动切换。自动切换可以用setInterval()来实现(这个函数与setTimeout基本一致,区别仅在于setTimeout只会在设定时间到后执行一次,而setInterval会在每过设定时间都会执行一次),设定一个change方法来切换下一张轮播图,让setInterval每过一段时间调用一次来切换即可。这样写基本就能结合手动切换和自动切换,但是有一个小问题,就是如果马上就要到执行setInterval的时间,但是我手动点击切换了一次,就会导致刚切换到我想看的那张轮播图,就会立刻切换到下一张。为了解决这个小问题,我们可以这样写(此方法作为所有切换的方法,只要是这个同一个轮播图的切换,都调用这同一个方法)

function change(i){
    /*当没有传入参数时调用此方法就会切换下一张*/
    if(i == undefined){
        index++;//index是一个去全局变量,表示当前显示的轮播图是第几张
    }else{
        index = i;
    }
    /*判断是否越界*/
    if(index < 1) index = max;//max表示最多轮播图的张数
    if(index > max) index = 1;
    //根据index修改css属性,此处以正常轮播图为例
    //此处需要注意
    //1.必须使用负值,为何是负值可以看着上面那个图自己思考一下
    //2.最后一定要加上"px",因为这个值直接修改了其css属性,所以必须按照css的写法来写
    //imgWidth就是每张轮播图图片的宽度
    inner.style.marginLeft = -index*imgWidth +"px";
    //这里是重点!
    clearTimeout(pre);
    pre = setTimeout(change,1000);
}

让我们来解析一下重点部分的代码:clearTimeout这个方法的意思是清除一个定时器(setTimeout生成的,如果执行过了,执行清除不会报错,但是没有意义)而其参数就是setTimeout返回的一个数字,这个数字就如同这个定时器的id。

每次切换图片时,我们都会调用一次此方法,如果是自动切换,就会在每次切换时,清除一次定时器,但是由于定时器正在执行,实际上此次清除是无意义的;之后再执行setTimeout再次设置定时器,从而形成一个循环。

如果定时器还未执行,此时点击就会将正在准备的定时器清除,并创建一个新的定时器。

注意:想要页面开始就触发自动播放,可以在js最后加一句change(1);也就是切换到第一张,同时开启了循环。

相关文章
|
3月前
|
前端开发 JavaScript 索引
|
3月前
|
JavaScript 前端开发
原生js做轮播图
原生js做轮播图
13 0
|
6月前
|
JavaScript 前端开发
使用js制作轮播图
使用js制作轮播图
32 0
|
30天前
|
JavaScript 前端开发
JavaScript随手笔记---轮播图(点击切换)
JavaScript随手笔记---轮播图(点击切换)
JavaScript随手笔记---轮播图(点击切换)
|
3月前
|
移动开发 JavaScript HTML5
JS实现轮播图(一看就懂逻辑清晰)
JS实现轮播图(一看就懂逻辑清晰)
|
3月前
|
JavaScript 前端开发
jsjs原生 JavaScript轮播图 渐变淡入淡出
jsjs原生 JavaScript轮播图 渐变淡入淡出
|
8月前
|
JavaScript 前端开发
js基础轮播图功能
js基础轮播图功能
42 0
|
3月前
|
JavaScript 前端开发
|
3月前
|
JavaScript 前端开发
制作JS焦点轮播图
制作JS焦点轮播图
|
4月前
|
JavaScript
【升级玩法】js用push、unshift、shift、pop或splice实现5张卡片(可以自由定义更多)轮播图效果banner、swiper
【升级玩法】js用push、unshift、shift、pop或splice实现5张卡片(可以自由定义更多)轮播图效果banner、swiper