今天分享一下简单的轮播图制作过程,用原生js实现。虽然网上有各种插件制作的高大上又好用的轮播图,但还是要清楚它的基本原理。
1.基本原理
将所有图片并排放到一个div中,然后再放到展示窗口当中,让装有所有图片的div通过改变left值,从而左右移动实现图片切换。
2.html代码
<div id="container">
<div id="list" style="left:-600px">
<img src="images/5.jpg" alt="5" />
<img src="images/1.jpg" alt="1" />
<img src="images/2.jpg" alt="2" />
<img src="images/3.jpg" alt="3" />
<img src="images/4.jpg" alt="4" />
<img src="images/5.jpg" alt="5" />
<img src="images/1.jpg" alt="1" />
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<a href="javascript:;" class="arrow" id="pre"><</a>
<a href="javascript:;" class="arrow" id="next">></a>
</div>
以一个有5张图片的轮播图为例,为了实现无缝滚动,需要在第一张图片前放置第五张图片,在
第五张图片后放置第一