轮播图原理大概是这样的，假定三张图片需要做轮播效果，首先需要将这三张图片并列放置，然后将这个整体并列向左移动，每当一张图片完整的从显示框走出，则将这张图片放置到最后面，循环往复就可以实现图片向左（或一个方向）移动。然后，需要有两个定时器，一个定时器A控制三张图片整体左移速度，另一个定时器B控制每当一张完整的图片走进这个显示框就等待一到两秒得到更好的用户体验。
在html的body中添加一个div作为显示框，然后在这个div内部添加三个子div作为图片显示。代码如下：
要实现将div挪动，且div比较方便控制每时每刻的位置(移动)，只能使用相对定位，且为方便，三个子div位置移动应该是相对box，所以box应该作为相对的参照点。分别为box和slide代码添加position属性：
为整个页面添加onload加载完成事件，当浏览器打开并加载完并自动执行事件中的代码块。这部分js代码写在刚才css下面即可，保持同级结构。
接下来，需要实现将这三个div整体向左移动，使用定时器，即前面的定时器A。*onload同级下面添加如下代码：
到这里，轮播图基本已经实现了。然后，还需要在css样式中为box添加overflow,将超出显示框的div隐藏。
然后为了解决当鼠标悬停在轮播图，轮播图停止轮播效果，需要在box上添加鼠标移入和移出事件。开始标签：
当浏览器窗口切出或页面切换到其他页面一段时间再回来时，轮播效果会有短暂加速（随切出时间加长而加长）。主要是因为虽然窗口切出去了，定时器依然在执行，但页面却没有将效果显示，所以切回来后会将之前的效果显示出来而加速轮播图。所以添加页面焦点事件：
就是一种网站在介绍自己的主打产品或重要信息的传播方式。说的简单点就是将承载着重要信息的几张
片，在网页的某一部位进行轮流的呈现，从而做到让浏览者很快的了解到网站想要表达的主要信息。例如：淘宝，京东，等大型的购物平台。以及各种新闻网站的头版头条都是用这种方式呈现的重要信息。二、
（详解）网页开发初学者学习时，一般都是先编写静态的页面，并没有JS、JQ等，在学习CSS3 时可以利用animation 属性制作一个简单的纯CSS3
基础知识废话不多说，先来复习一下CSS的animation 属性： 属性 说明 animation-name 用来指定一个关键帧动画的名称，这个动画名必须对应一个@k......
