javaScript实现焦点轮播图界面效果(二)

在实现以上这些功能之前,我们先来说一下我们这里轮播图实现的原理

首先看一下html代码

css样式如下:

我们要实现的4张图片的轮播效果,这里我们写了6张图片,是为了实现图片的无缝滚动,我们在div上放置了4张图片,通过设置div的overflow:属性值为hidden;将其他图片隐藏起来,只显示第一张图片。通过改变div的left的值来设置显示图片。这里图片的宽度为1920px,显示第一张图片时left值为-1920px,滚动到第2张图片时, left值为-1920*2px,滚动到第3张时left值为-1920*3px,滚动到第4张图片时left值为-1920*4px。然后又会回到第一张图片,此时left值又为-1920px。这样无限滚动

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容