一个"高级"轮播图
大家好我们今天来整一个高级轮播图,轮播图嘛,大家可能在网上可以找到各种插件,但是我觉得自己会手写轮播图很重要,能帮大家复习一下js前面的知识,如果哪天你去面试,项目经理让你写个轮播图,你说你会用插件,那是不是有点不好呢。废话就不说了,开整。
第一步:先思考写个轮播图需要什么东西。
第二步:用css搭建个模型
第三步:动手写js
首先我们要知道轮播图的图片应为动态添加,这样后期才方便添加别的图片,当然图片的序号也要动态添加,毕竟得与图片数量对应,然后就是要添加页面左右两边的小箭头了(当鼠标移出轮播图后自动隐藏),已及创建定时器让图片能自动轮播,以及最关键,当图片轮播到最后一页后,会自动将第一张图片添加到后面,最终才能实现轮播效果。
说了这么多,其实轮播图很简单,我先展示一下静态页面
overflow: hidden;
为什么是这样的效果呢?
其实吧,没有为什么,轮播图就是这样,我们最后看到的不过是隐藏之后的样子。
js部分
虽然我把图片写死了,但是页面右下角的序号还是得动态添加的
然后我们接着要写点击事件了,为了代码的规范,我们先给它封装
负号是因为正常情况下图片是从右向左移动,但是这样的话,我们的轮播效果就会变得相反,所以我们给了它个负号,这样图片才会顺着我们想要的方向移动。
注意
对了在动态添加ol下面的li后,我们需要在外面获取一遍
let ol_li = ol.getElementsByTagName('li')
接下来,我们要将页面上的左右箭头完工并给它添加点击事件
最最最后一步,克隆一个li(第一个)
let cllone_li = first_li.cloneNode(true)
ul.appendChild(cllone_li)
是不是觉得很简单,其实确实,当然如果你们看到这你会发现animate是我引入的,也是动画效果。这里大家可以自己凭自己的喜好去创建。
轮播图现在基本上都是网上直接引用,很难见到手码的,但是我希望大家能自己敲一敲。我已经把关键代码都发了出来,希望对大家能有所帮助
setAttribute() 方法添加指定的属性,并为其赋指定的值。
appendChild() 方法向节点添加最后一个子节点。
onmouseenter 事件在鼠标移入元素时触发。
onmouseleave 事件在鼠标移出元素时触发。
cloneNode() 方法创建节点的拷贝,并返回该副本。
cloneNode() 方法克隆所有属性以及它们的值。
如果您需要克隆所有后代,请把 deep 参数设置 true,否则设置为 false