css

*{
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }
        #banner{
            margin: 0 auto;
            width: 1024px;
            height: 684px;
            overflow: hidden;
            border: 3px solid #999;
            position: relative;
        }
        #imglist{
            width: 1024px;
            height: 684px;
        }
        #imglist a{
            display: none;
        }
        #iconlist{
            position: absolute;
            right: 20px;
            bottom: 10px;
        }
        #iconlist li{
            width: 25px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            float: left;
            background-color: #999;
            border-radius: 13px;
            color: #fff;
            cursor: pointer;
            margin-left: 5px;
        }
        .last,.next{
            display: none;
        }
        .last{
            position: absolute;
            width: 50px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            font-size: 30px;
            background-color: #999;
            color: #fff;
            left: 10px;
            top: 50%;
            margin-top: -50px;
            opacity: 0.5;
        }
        .next{
            position: absolute;
            width: 50px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            font-size: 30px;
            background-color: #999;
            color: #fff;
            right: 10px;
            top: 50%;
            margin-top: -50px;
            opacity: 0.5;
        }
        #banner:hover .last,#banner:hover .next{
            display: block;
        }

html

<div id="banner">
        <div id="imglist">
            <a href="#" style="display: block"><img src="img/11.jpg" alt=""></a>
            <a href="#"><img src="img/12.jpg" alt=""></a>
            <a href="#"><img src="img/13.jpg" alt=""></a>
            <a href="#"><img src="img/14.jpg" alt=""></a>
            <a href="#"><img src="img/15.jpg" alt=""></a>
        </div>
        <ul id="iconlist">
            <li style="background-color: #cc0">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <div class="last"><</div>
        <div class="next">></div>
    </div>

js

var imgs = document.getElementById('imglist').getElementsByTagName('a');
    var icons = document.getElementById('iconlist').getElementsByTagName('li');

    var div = document.getElementById("banner");

    var last = document.getElementsByClassName('last')[0];
    var next = document.getElementsByClassName('next')[0];

    var imglenght = imgs.length;
    var iconlenght = icons.length;
    //设置循环变量
    var m = 1;
    //定时器
    var timer = setInterval(run,3000);
    //循环函数
    function run() {
        if (m >= 5){
            m = 0;
        }
        controlimg(m);
        //控制图标
        controlicon(m);
        m ++;
    }

    //定义一个函数  控制图片
    function controlimg(m) {
        for (var i = 0;i < imgs.length; i ++){
            imgs[i].style.display = "none";
        }
        //显示指定图片
        imgs[m].style.display = "block";
    }

    //改变图标颜色
    function controlicon(m) {
        for (var i = 0;i < imgs.length; i ++){
            icons[i].style.backgroundColor = "#999";
        } ;
        //显示指定图片
        icons[m].style.backgroundColor = "#cc0";
    }
    //鼠标悬停事件，
    div.onmouseover = function () {
        clearInterval(timer);
    };
    // 鼠标移走事件
    div.onmouseout = function () {
        timer = setInterval(run, 2000);
    }
    //图标绑定事件
    for (var i = 0;i < icons.length; i ++){
        (function (i) {
            icons[i].onmouseover=function () {
                controlimg(i);
                controlicon(i);
                m = i + 1;
            }
        })(i)
    };
    //点击左边的标签向左切换
    last.onclick = function (){
      m --;
      if(m < 0){
        m = 4;
      };
      controlimg(m);
      //控制图标
      controlicon(m);
    };
    //点击左边的标签向左切换
    next.onclick = function (){
      m ++;
      if(m >=5){
        m = 0;
      };
      controlimg(m);
      //控制图标
      controlicon(m);
    };