js进阶,轮播图实现原理

在网页的广告中,常常存在使用js代码实现图片轮播功能,在电商类网站中常遇到的开发任务,轮播广告效果通常的应用场景:企业宣传、产品促销、大事记展示等等。下面用精简的100多行的代码实现了5图轮播广告效果,当然,下面代码使用一种原生js的写法(还会有jquery的写法,vue的写法等)。作为js的进阶,原生写法可以锻炼js的编程水平,及html,css,js的混合编程能力。

附代码及其讲解:图1

上图为文件的目录结构。建立img文件夹,并新建demo.html文件。图2

图3

图4

图5

从第6行到77行结束为页面的css代码。此处css主要是标签选择器,类选择器,及其属性与值,看不懂的,需学习css基础教程。图6

上图中,79行的window.onload该方法用于在网页加载完毕后立刻执行的操作,即当html加载完毕后,立刻执行functiona()方法,80行到84行中的documnet.getElementById()是获取页面需要操作的元素(这句看不懂的需要,重新学习javascript基础教程)。80行是为取得轮播图父容器,81行是为取得图片列表。82行是获取图片切换圆点按钮组。

此图中106行是重复执行的定时器图8

此图中131行这里获得鼠标移动到小圆点的位置,用this把index绑定到对象buttons[i]上,去搜索js中this的用法。由于这里的index是自定义属性,需要用到getAttribute()这个DOM2级方法,去获取自定义index的属性,133行这个index是当前图片停留时的index。图9

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181020A074TU00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券