详解JavaScript轮播图技术理解

众所周知,轮播图现今在网页中占据着必不可少的地位。任何的一个网站,一个网页,都会出现一个轮播图,而轮播图更是利用JavaScript做出的一个比较基础的动画。下面是我本人对写轮播图的一点见解,很多地方可能不是很全面,甚至可能说是错误的,希望大家多多指点。

下面这个是我自己闲暇时随便做的一个轮播图:

详解JavaScript轮播图技术理解

我觉得轮播图中最主要的是要理解到图片为什么会滑动,是怎么控制的。上面这个我自己做的,是搭好的一个结构,在无序列表中插入需要的图片。然后在插入图片的后面添加一个空的无序列表,作为轮播图中下方的小点。

详解JavaScript轮播图技术理解

然后就是css中书写样式了,首先肯定得把无序列表中的li从从上至下排列变为水平方向排列,也就是给li添加一个float属性;然后有一点需要注意,轮播图外面的大盒子必须设置为图片的大小,超出的隐藏,这样可以刚刚好显示出一张图片。然后装图片的ul的宽度必须大于或者等于所有图片总宽度。同样,这里也需要运用一个定位的知识,子绝父相。给class为box的盒子设置相对定位,装图片的ul设置绝对定位。这里,尽管轮播图下面几个点没有,但是我们要把样式先写好,然后后面通过JavaScript添加。

主要样式如下:

详解JavaScript轮播图技术理解

详解JavaScript轮播图技术理解

详解JavaScript轮播图技术理解

在HTML文件和css样式表都已经写好之后,我们就可以开始书写js代码了,让图片动起来。

在JavaScript中让图片动起来的核心函数是setInterval(function(){},value);这个函数是一个定时器,第一个参数是你想让某个对象执行的事件或者动作,然后第二个参数value则是时间,意思是多少时间执行一次。

然后在轮播图中,想让图片动起来并且从视觉上看没什么异样,我们首先需要克隆第一张图片,并且将第一张图片加在最后。具体代码如下:

详解JavaScript轮播图技术理解

这个代码是用jQuery书写的,首先获取到轮播图那个大盒子,然后再找到轮播的图片这个对象,然后用first()方法找到第一张照片,并且用clone()这个方法将第一张照片克隆,最后用append()方法把克隆下来的这张照片添加到所有轮播图片的后面,这样克隆工作就完成了。

接下来就是让这个图片动起来了,动起来很简单,只需要设置一个定时器就ok,代码如下:

详解JavaScript轮播图技术理解

这时定时器中的move()函数并没有定义,接下来我们就定义这个函数,代码如下:

详解JavaScript轮播图技术理解

首先要定义一个变量i,初始值为0,每执行一次定时器,i的值便会加1。在定义一个size值,令其等于轮播图中图片的数量。然后让装所有图片的容器往左移动图片的宽度*i,这样在定时器的配合之下,图片就会一张一张的一次展示。可想而知,i的值肯定有个范围,不可能让它永远的加大,因此在move函数中,我们需要一个判定。当i=size的时候,这个时候轮播图中的照片肯定已经到了最后一张,这个时候我们前面克隆了第一张照片加在最后,因此这张照片虽然是最后一张,但是其实它是第一张照片。这时,我们就需要重置i的值,令i=1;并且通过jQuery控制样式,令装照片的容器回到初始位置,开始新的一次运动。

最后就是初始图片中的那几个点了,这个更简单了,我们获取了size的值之后,再通过for循环,就可以添加那几个点了。代码如下:

详解JavaScript轮播图技术理解

这个难点在于怎么让小点的位置随着图片的移动而移动。首先我们默认将在css中定义好的样式赋予第一个小点。代码如下:

详解JavaScript轮播图技术理解

然后就是在move函数中定义小点的相应的移动,代码如下:

详解JavaScript轮播图技术理解

很明显,小点的样式也是通过i来确定的。这里有一个误区,很多人会认为第一个小点就是1,但是其实不是,因为数组是从0开始的,所以第一个小点是0。i的值代表了显示的是第i-1张图片,所以这个时候只需要将样式赋予第i个点就行了,并且同时要清除其他的点的样式。特殊的当i=size-1的时候,这个时候,显示的是最后一张图,这张图下面那张图就是第一张图的克隆图,因此,这个时候,小点的样式就需要添加给第一个点。

完成以上操作之后,简单的轮播图就做好了。

详解JavaScript轮播图技术理解

主题测试文章,只做测试使用。发布者:小屋,转转请注明出处:http://www.rumenwu.com/operate/578.html

(0)
小屋的头像小屋
上一篇 2018年4月1日 上午1:45
下一篇 2018年4月8日 上午12:11

相关推荐

  • 教育大公司玩转短视频账号,为什么这么难?

    如今短视频占据了很多用户的休闲娱乐时间,短视频平台也成了各个商家的引流平台;各种教育公司也在短视频平台上进行线上教育的普及和产品的投放,但是教育的短视频孵化和变现并不容易;本文作者分析了教育公司运营短视频账号的现状,我们一起来看一下。 跟身边做教育的朋友聊了聊他们最近运营抖音、快手账号的进展,朋友叙述的过程里频频叹气,言语间透露出身处教育公司的运营做短视频的…

    2020年10月10日
    1800
  • 指南:应届生如何应聘产品经理?

    凭借着工资高、门槛低、易上手的“先天优势”,产品经理这个岗位逐渐吸引了越来越多的人去应聘,其中不乏有刚刚毕业的应届生。那么,面对如此激烈的竞争,应届生应该如何着手准备呢?本文作者为我们揭晓了答案。 又要到毕业季了,对于所有应届毕业生来说,如何利用秋招和春招找到合适的工作是非常重要的一件事。 6年前的我,通过突击队式的自学,最终转行拿到了产品经理的offer。…

    产品运营 2021年3月3日
    50000
  • 企业如何做好自媒体运营?6大自媒体平台玩法详解

    企业运营自媒体需要从目标消费者出发,企业的目标消费者在哪里,就在哪里展开自媒体运营。再根据自身的产品属性、用户特征,结合不同自媒体平台的调性,来决定选择在哪个平台进行运营,根据不同平台可以采用不同的内容形式和运营玩法。 小米董事长雷军,为了给新发售的小米CC 做宣传,2019年6月开通了小红书帐号。到目前为止,接近9个月时间雷总一共发了70条笔记,收获2.6…

    产品运营 2020年10月10日
    41800
  • chrome浏览器CSS字体大小小于12px不起作用解决方法

    chrome浏览器不能显示字体大小小于12px解决方法,CSS设置小于12px字体不起作用的解决方法篇。 无论中文英文数字在网页中CSS设置小于12px后各大浏览器均支持,在谷歌chrome浏览器不支持解决方法。 针对低版本chrome谷歌浏览器设置一个校准字体大小样式: -webkit-text-size-adjust:none 用法: body{-web…

    产品运营 2018年3月18日
    74600
  • CSS DIV高度不确定如何设置高度

    CSS DIV高度不确定如何设置高度,是否需要加上height:auto属性? 在CSS布局中,常常最外层的DIV盒子不能确定具体的height高度值,不确定内容是否可多可少而不能确定父级盒子究竟设置多高。此时一般新手喜欢设置个height:auto(高度自适应)样式。 这里DIVCSS5可以告诉大家,一般最外层的DIV盒子,或不确定内容(子级)占用多高时,…

    产品运营 2018年3月13日
    80200

发表回复

登录后才能评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信