网页html轮播图幻灯片,无bug,IOS和android适配,可滑动,可拖动,可点击

身为一个不那么优秀的后端程序员,我花了好几天,写了个前端的轮播图幻灯片,改了n多bug之后,大概没有bug了…

2020年7月12日更新计算方式,修复一些不算bug的bug.
比如有时候网页加载慢,会导致js计算的图片宽度有问题,拖动时两张图之间会有白色空隙.bug已解决.需要自己计算出图片的宽高比和图片与屏幕宽度的比率.

先上链接----

下载链接: 点击下载.
预览链接: 点击预览.

本轮播可以在电脑端鼠标拖动,手机端手指滑动,为了方便后端直接插入或者load进其他页面,连标签的名字我都改成了肯定不会与其他页面id或者class冲突的名字.

为了防止从第1张图点到第3张图时连续跳页,本轮播采用了不同于大部分网站轮播的方式,先将展示图的siblings标签分别挪到展示图两侧,点击后会在展示图两侧直接显示要展示的图,以防跳页.

举个例子,展示图是111,当点击右下角的333后,基本网上搜的大部分轮播都会跳两张图转到333,这个bug我一个后端程序员都忍不了了,本轮播,点了333,111右边不会出现222,直接就是333,点预览链接自己体会一下吧,我恨bug.

不要积分,不要毒盘,自己的服务器放的预览与下载链接

另外,作为一个后端程序员,我发誓,我再也不想写轮播了!!!

转载请注明出处

电脑端预览图网页html轮播图幻灯片,无bug,IOS和android适配,可滑动,可拖动,可点击_第1张图片

移动端预览图

网页html轮播图幻灯片,无bug,IOS和android适配,可滑动,可拖动,可点击_第2张图片
html代码




	
	
	
	轮播










你可能感兴趣的:(网页html轮播图幻灯片,无bug,IOS和android适配,可滑动,可拖动,可点击)