介绍
这篇文章将为大家详细讲解有关原生js实现轮播图的实例分析,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
轮播图是前端最基本,最常见的功能,不论web端还是移动端,大平台还是小网站,大多在首页都会放一个轮播图效果。下面讲解怎么实现一个简单的轮播图效果。学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础。
本实例效果如下图所示:
,根据实例效果,需要的元素有图片,中间圆点按钮,左右箭头按钮等。实际html代码如下所示:
& lt; div 类=癰anner_container", id=癰annerContainer"祝辞,& lt; div 类=癷mg_box"在& lt; !——图片元素,祝辞,& lt; div> & lt; img src=https://www.yisu.com/zixun/癷mg/1. jpg”alt=" ">
<李> <李> 2 <李> 3 <李> 4 <李> 5
读者可以根据实际效果自行编写样式。
接下来完成javascript部分的代码,先分析一下轮播图的效果所需要的步骤。
1。获取轮播图各个html元素及声明相关变量。如下所示:
//获取外包容器,var eContainer =, . getelementbyid (& # 39; bannerContainer& # 39;);,//获取图片总容器,var eImgBox =, eContainer.getElementsByClassName (& # 39; img_box& # 39;)[0];,//获取图片容器列表,var aImgList =, eImgBox.getElementsByTagName (& # 39; div # 39;);,//获取选择按钮容器,var eSelBox =, eContainer.getElementsByClassName (& # 39; sel_box& # 39;)[0];,//获取选择按钮,var aSelList =, eSelBox.getElementsByTagName(& # 39;李# 39;);,//获取左按钮,var eLeftBtn =, eContainer.getElementsByClassName (& # 39; left_btn& # 39;)[0];,//获取右按钮,var eRightBtn =, eContainer.getElementsByClassName (& # 39; right_btn& # 39;)[0];,//当前图片索引,var nIndex =, 0;,//轮播图自动切换定时器,var timer =,零;
2。设置图片容器大小及位置
一般轮播图的数量不是固定的,可能是3个,也可能是5个,所以“图片容器的宽度=外包容器宽度*轮播图数量”,代码如下:
//获取外包容器宽度,var nContainerW =, eContainer.offsetWidth;,//设置图片总容器宽度,eImgBox.style.width =, nContainerW *, aImgList.length +, & # 39; px # 39;;
3。设置默认显示图片及选择按钮,本实例第一张图为默认图片,代码如下:
//默认显示第一张图片,eImgBox.style.left =, & # 39; 0 px # 39;;,//默认第一个选择按钮设为当前选择按钮,aSelList [0] .className =, & # 39; cur # 39;;
4。给选择按钮绑定轮播图切换事件,在这里把点击事件委托给选择按钮
关于原生js实现轮播图的实例分析就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
