js实现轮播图

html代码如下:
在这里插入图片描述
js代码单独放在js文件夹中
在这里插入图片描述

js代码如下:
move函数
在这里插入图片描述
1,根据原始的轮播图的图片数量,动态生成焦点按钮
原理:根据ul中li的数量,动态生成ol中li标签,并且写入到ol中
循环 ul,li 的伪数组,根据数组的单元个数,生成ol中的li,for循环 for…in forEach,都可以
forEach中,item是ul,li标签,key是标签对应的索引
在这里插入图片描述
2, 向页面写入标签
复制的标签是动态生成的,页面内的标签是什么,我们就复制,复制第一个ul中的li,复制最后一个ul中的li,将复制的最后一个,写入到一个之前,将复制的第一个,写入到最后一个之后,根据新的标签结构,定义新的ul的宽度,宽度是 li的个数 * li的宽度,新的li的个数: 是原始li个数 + 2,将ul整体左移一个li宽度

步骤:
1,获取li,第一个和最后一个
2,复制li
3,写入li
4,设定ul宽
5,ul左移一个宽度
在这里插入图片描述
3, 轮播图轮序播放函数
在这里插入图片描述
效果图如下:
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值