素材巴巴 > 程序开发 >

用js原生代码写轮播

程序开发 2023-09-15 07:21:05

本文是用js原生代码写轮播,为自己的难点做一次总结,主要是借鉴老师,而后自己写来了供自己参考。
所以要写轮播图先要写好自己想要的html样式如图一所示
在这里插入图片描述图一 HTML样式
首先要放几张图,就需要先多放两张,比如有1,2,3,4,5张图,那么需要在第五张后面放上1图,在第一张前面放上一张5图,这是为了实现无缝轮播。
第二步为五张图各设置一个span标签的按钮,再设置两个a标签做为前后滚动点击事件
接下来就是如图二所示的css的样式
在这里插入图片描述 图二 css样式
为了让图片只在lunbox的盒子中,我们要为其设置高度和宽度,并使用超出隐藏的overflow:hidden,将其他图片隐藏起来,因为要图片左右切换,所以把图片左浮动,使其在一个行内,要设置tubox相


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。