如何在HTML5实现简易轮播图？案例代码分享！

在开发中对于轮番图的使用更是多姿多彩，那么对于这方面的内容今天我们就来讲讲有关于：“如何在HTML5实现简易轮播图？”这方面的相关内容！

轮播图原理大概是这样的，假定三张图片需要做轮播效果，首先需要将这三张图片并列放置，然后将这个整体并列向左移动，每当一张图片完整的从显示框走出，则将这张图片放置到最后面，循环往复就可以实现图片向左（或一个方向）移动。然后，需要有两个定时器，一个定时器A控制三张图片整体左移速度，另一个定时器B控制每当一张完整的图片走进这个显示框就等待一到两秒得到更好的用户体验。 我这里用三个div框当作轮播图来演示。 在html的body中添加一个div作为显示框，然后在这个div内部添加三个子div作为图片显示。代码如下：

头部添加css样式：

此时网页中应该是有一个黑色显示框div，内部有红、绿、蓝三个div框,三个框从上到下排列。 第一步，需要将三张图片都并列显示。 要实现将div挪动，且div比较方便控制每时每刻的位置(移动)，只能使用相对定位，且为方便，三个子div位置移动应该是相对box，所以box应该作为相对的参照点。分别为box和slide代码添加position属性：

为整个页面添加onload加载完成事件，当浏览器打开并加载完并自动执行事件中的代码块。这部分js代码写在刚才css下面即可，保持同级结构。