用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相
标签:
相关文章
-
无相关信息