轮播广告效果实现

由于看到每个电商网站的首页基本上都有轮播广告，所以我也写了一个简单的轮播广告效果，记录一下，以后用到的话可以直接使用了。

本篇主要介绍如何在我们的网页中快速实现轮播效果，js的原理部分在续篇中详细讲解。

一、首先在HTML中想要放轮播的地方加入以下代码：

<div id="slider">
    <ul id="imgs"></ul>
    <ul id="indexs"></ul>
</div>

二、在样式文件中加入以下样式：

#slider {
    width: 670px;
    height:240px;
    margin-top:10px;
    position:relative;
    overflow:hidden;
}
#slider #imgs {
    position:absolute;
    top: 0;  left: 0;
    height:240px;
}
#slider #imgs li{
    float:left;
    z-index:0;
}
#slider #indexs {
    position:absolute;
    bottom:15px;
    right:30px;
}
#slider #indexs li {
    width: 22px;
    height: 22px;
    line-height: 22px;
    display: inline-block;
    background: #3e3e3e;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
    margin-left:10px;
}
#slider #indexs li.hover {
    background:#b61b1f ;
}

三、在js文件中加入以下函数：

function luobo(imgs){
    /*封装$*/
    function $(selector){
        return document.querySelectorAll(selector);
    }
    var imgs=imgs;
    var slider={
        LIWIDTH:0,