在实现以上这些功能之前,我们先来说一下我们这里轮播图实现的原理
首先看一下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。这样无限滚动。