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。这样无限滚动。