js简单的轮播

1.html

    <div class="banner" id="banner">
            <ul class="items" id="items">
                <li>![](img/banner1.jpg)</li>
                <li>![](img/banner2.jpg)</li>
                <li>![](img/banner3.jpg)</li>
                <li>![](img/banner4.jpg)</li>
            </ul>
            <ul class="dots" id="dots">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <p class="btn_left" id="btn_left"><</p>
            <p class="btn_right" id="btn_right">></p>           
        </div>

2.css

*{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}

.banner{
    width: 800px;
    height: 400px;
    margin: 50px auto;
    overflow: hidden;
    border-radius: 20px;
    position: relative;
    transition: all 1s;
}
.banner:hover{
    margin-top: 45px;
    box-shadow: 0px 5px  5px 5px #eee;
}
.items{
    width: 3200px;
    height: 400px;
}
.items>li{
    width: 800px;
    height: 400px;
    float: left;
}

.items>li>img{
    width: 800px;
    height: 400px;
}
.dots{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 30px;
}
.dots:after{
    display: table;
    content: "";
    clear: both;
}
.dots>li{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: white;
    float: left;
    margin: 0 15px;
}
.banner>p{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 50px;
    background: rgba(33,33,33,0.4);
    text-align: center;
    line-height: 50px;
    font-size: 34px;
    border-radius: 5px;
    cursor: default;
}
.btn_left{
    left: 10px;
}
.btn_right{
    right: 10px;
}

3.js

//1.得到页面上要用的html标签
var items = document.getElementById("items");//图片banner集
var itlis = items.getElementsByTagName("li"); //得到所有的图片banner

var dots = document.getElementById("dots");
var dotlis = dots.getElementsByTagName("li");//得到下面所有点

var btn_right = document.getElementById("btn_right");//得到下一页按钮
var btn_left = document.getElementById("btn_left");//得到上一页按钮

var liw = itlis[0].offsetWidth * 1;//得到一个图片banner的宽度
dotlis[0].style.backgroundColor = "red";//给第一个小圆点设置背景颜色

var banner = document.getElementById("banner");//得到banner标签

var cur = 0;//声明游标
var timer;//声明定时器


//2.设置下一页的点击事件
btn_right.onclick = function() { //点击下一页按钮
    dotlis[cur].style.backgroundColor = "white";//把当前小圆点的颜色设置为白色
    cur++;//游标加一
    if(cur >= itlis.length) {//判断游标是否大于或等于所有图片banner的最大值
        cur = 0; //如果大于就让游标的值变为0
    }
    items.style.marginLeft = -cur * liw + "px";//让图片banner集的下一张显示出来
    dotlis[cur].style.backgroundColor = "red";//给下一个小圆点设置背景颜色为红
}

//3.设置上一页的点击事件
btn_left.onclick = function() {//点击上一页按钮
    dotlis[cur].style.backgroundColor = "white";
    cur--;
    if(cur < 0) {
        cur = itlis.length - 1;
    }
    items.style.marginLeft = -cur * liw + "px";
    dotlis[cur].style.backgroundColor = "red";
}

// 4.设置定时器
timer = setInterval(function() {//设置定时器  每两秒点击一下下一页按钮
    btn_right.onclick();
}, 2000);

//5.鼠标悬停事件以及鼠标离开事件
banner.onmouseover = function() {//当鼠标悬停在banner上时，清除定时器
    clearInterval(timer);
}
banner.onmouseout = function() {//当鼠标离开的时候重新调用定时器
    timer = setInterval(function() {
        btn_right.onclick();
    }, 2000);
}