详解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-04-01 01:45
下一篇 2018-04-08 00:11

相关推荐

  • 拥有百万粉丝的新媒体运营,必备49个爆款工具

    一、工具篇 数据指数 百度指数:很好用的内容选题工具。 5118:中国目前最好用的网站数据工具。 新榜:专注公众号数据。 原型设计 墨刀:国产原型设计工具,支持协同,功能丰富。 Balsamiq Mockuo:操作简单,有在线版和客户端版,非常适合新手。 着陆页制作 上线了:傻瓜式的操作,对新手非常友好。 MAKA:H5模板丰富,上手容易。 ih5:目前中国…

    2020-11-16
    1.4K0
  • 详解Javascript原生瀑布流源码示例演示

    浏览网页的时候经常会遇到瀑布流布局的网站。也许有些读者不了解瀑布流。瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。比如下面图片的效果(百度图片),就是一个典型的瀑布流。 js瀑布流加载 网上有很多JQ的瀑布流插件,而且都写好了兼容,都可以尝试去使用,这…

    2018-04-08
    2.7K0
  • 别让你的付费社群,变成普通微信群

    知识付费时代,不少人愿意用钱来快速的获取知识,于是出现了许多的付费社群。然而随之也衍生了不少割韭菜的现象,大家纷纷感慨:怎么进了付费群还是学不到东西呢?你有没有遇到这种困扰?来看看本文作者的分析吧。 今天来和各位聊聊,为什么你加入了社群总有一种后悔甚至是割韭菜的感觉。 一、纯粹割韭菜社群 其实付费社群本身就是一个产品,而产品就有高中低不同的档次之分,也有正品…

    2021-02-20
    8340
  • 纯Css文字上下滚动轮播

    代码描述:纯Css文字上下滚动轮播  

    2018-04-27
    6.7K0
  • 被吹爆的私域到底是什么?

    关于私域流量运营的文章大家应该看过了很多,但有一个基本点是我们所忽略的:很多人对私域原点的认知是不清晰的。到底什么才是私域?私域为什么会产生价值?网上有各种各样的私域定义,今天本文作者从以下五个方面来阐述,帮助大家深刻建议对私域的认知。 一、私域的本质是流量 这是首当其冲要解释的一点,最重要的是对微信私域的认知。 村长之前也解释过,为什么要把那么多人导流到微…

    2021-03-03
    5670
  • 如何利用私域流量促进产品成交?

    这篇文章从私域流量出发,围绕如何搭建私域流量池,朋友圈种草以及快闪群成交,分析了。推荐给对这方面有兴趣的小伙伴们。 一、搭建私域流量池 掌握一个思维——低成本吸引精准客户。 给大家介绍私域流量营销导图,在经营客户的时候,我们必须要有个渠道,如果门店开在商场,商场就是我们的公域流量或者说是渠道,比如我们线上的淘宝、微博、抖音等自媒体平台,只是大家没发现这个流量…

    2020-03-16
    1.9K0