轮播图滑动式基础篇

轮播图常见的分为两种，一种是直接切换图片（这种方式使用的少），另外一种是切换的图片慢慢滑过去覆盖第一张图片（这种方式使用的多）。
今天要分享的是需要切换图片慢慢滑过去覆盖第一张照片，并且当鼠标移动到图片上时，图片不会发生切换操作，只有当鼠标移开时，图片继续慢慢滑动覆盖第一张照片。
话不多说我们上代码慢慢解读
由于本人比较懒>-<，没有找图片直接使用3个div代替，设置背景颜色，大家别见外哈。
附上代码：
首先我们创建一个div，取名为box，然后添加两个事件（一个当鼠标指针移动到图像上时执行一段 JavaScript事件，另外一个当鼠标指针移动到图像之外时执行一段 JavaScript事件）

然后设置图像布局

#box{
    width:100px;
    height:100px;
    border:1px solid black;
    position:relative;
    overflow:hidden;
}
#red{
    background-color: red;
    width:100px;
}
#green{
    background-color: green;
    width:100px;
}
#blue{
    background-color: blue;
    width:100px;
}
.slide{
    width:100px;
    height:100px;
    position:absolute;
}

页面上只显示最后那个张“图片”，也没有自己轮播起来，不急这个时候我们需要添加js代码，使图片轮播起来并添加动作。
附全部代码如下：