这篇文章给大家分享的是有关如何使用原生js实现移动端接触轮播图的方法步骤的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
js是JavaScript的简称,它是一种直译式的脚本语言,其解释器被称为JavaScript引擎,是浏览器的一部分,主要用于web的开发,可以给网站添加各种各样的动态效果,让网页更加美观。
<强>接触轮播图
接触轮播图其实就是通过手指的滑动,来左右切换轮播图、下面我们通过一个案例,来实现下。
<强> 1。html结构
结构上,还是用ul、李来存放轮播图片,ol,李来存放轮播小圆点:
<强> 2。样式初始化
html的一些标签,都会有一些默认样式,比如身体标签默认是有一个边距的,为了不影响美观,我们需要清除掉。
<强> 3。添加样式
在前面讲特效的时候,我们说过如何使用原生js实现移一个轮播图的概念,但是当时的方式是通过李浮动,这里给大家介绍一种新的方——定位。
思路:
给ul外层的盒子一个相对定位;
<李>这里的ul高度不能写死,它应该是李撑开的高度,但是由李于绝对定位,没办法撑开这个高度,所以这里的ul需要在js里面动态设置高度;
<李>给李设置相对定位,并且左、前都为0,再给李添加一个变换:translateX(300%)属性,目的是初始化显示的图片为空,然后在js里只需要动态设置每个李的translateX值,即可实现轮播,
<李>设置小圆点区域,因为小圆点个数未知,所以ol的宽度也未知,想要让一个未知宽度的盒子水平居中,可以使用绝对定位结合离开百分比的方式实现;
<李>给ol下面的李设置一个宽高添加圆角边框属性,并且左浮动,这样就能显示一排空心的小圆点了;
<李>最后,添加一个样式类,里面设置一个背景属性,用来显示当前展示图片对应的小圆点。
<强> 4。js准备工作
先不考虑别的,js在初始化的时候,首先要做的就是给ul添加上一个高度,不然图片是不显示的。
给ul动态设置高度
<李>动态生成小圆点(根据图片的张数创建小圆点个数,i=0添加活动)
<李>初始化三个李的基本位置
定义三个变量,分别用来存储三个李的下(左存储最后一张图片的下标,中心和右分别存储第一张和第二张的下标)
