html：

<div id="banner" class="banner  ">
    <div id="lunbo" class="lunbo">
        <ul>
            <li><a href=""><img src="images/slide01.jpg" alt=""></a></li>
            <li><a href=""><img src="images/slide02.jpg" alt=""></a></li>
            <li><a href=""><img src="images/slide03.jpg" alt=""></a></li>
            <li><a href=""><img src="images/slide04.jpg" alt=""></a></li>
            <li><a href=""><img src="images/slide05.jpg" alt=""></a></li>
        </ul>
    </div>
    <div id="point" class="point">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
    </div>
    <a href="#" class="prev"><img width="80px" height="80px" src="images/pl.png" alt=""></a>
    <a href="#" class="next"><img width="80px" height="80px" src="images/pr.png" alt=""></a>


</div>

css：

.banner {
    width: 100%;
    margin: 20px 0;
    background-color: #efefef;
    padding: 20px 0 20px 0;
    position: relative;

}

.banner .lunbo {
    width: 960px;
    height: 340px;
    margin: 0 auto;
    overflow: hidden;
}

.banner .lunbo ul {
    width: 600%;
    height: 340px;
}

.banner .lunbo ul li {
    z-index: 99;
    float: left;
    width: 960px;
    height: 340px;
}

.banner .point {
    position: absolute;
    right: 20%;
    bottom: 10px;
}

.banner .point p {
    text-align: center;
    width: 20px;
    height: 20px;
    float: left;
    margin-right: 5px;
    display: inline-block;
    border: 1px solid white;
    border-radius: 50%;
    color: white;
    cursor: pointer;
}

.banner .point .current {
    background-color: #f4a523;
}

.prev,.next{
    position: absolute;
    top: 190px;
    opacity: 0.6;
    color: red;
}
.next{
    right: 20%;
}
.prev{
    left: 22%;
}

jq+js：

$(function () {
    // 編寫jQuery相關程式碼
    // alert("hello lnj");
    var num = 0;
    var timer = null, timeout = null;

    $('#point p').eq(0).addClass('current');
    // console.log($('#point p').eq(0));
    /*指示器*/
    $('#point p').mouseover(function () {
        clearInterval(timer);
        if (timeout) {
            clearTimeout(timeout);
            timeout = null;
        }
        num = $(this).index();
        //設定懸浮時500毫秒時切換，不足100毫秒時不會切換
        timeout = setTimeout(changgeMg, 100);
        // timer = setInterval(changeImg, 2000);
        return false;
    })
    /*懸浮停止動畫*/
    $('#lunbo').mouseover(function () {
        clearInterval(timer);

    });
    $('#lunbo').mouseout(function () {
        timer = setInterval(changeImg, 2000);

    });
    /*箭頭*/
    $('.next').click(function () {
        if (timeout) {
            clearTimeout(timeout);
            timeout = null;
        }
        if (num < 4) {
            num++;
        } else {
            num = 0;
        }
        timeout = setTimeout(changgeMg, 100);
        return false;
    })
    $('.prev').click(function () {
        if (timeout) {
            clearTimeout(timeout);
            timeout = null;
        }
        if (num > 0) {
            num--;
        } else {
            num = 4;
        }
        timeout = setTimeout(changgeMg, 100);

        return false;
    });

    /*輪播動畫+指示器上色*/
    function changgeMg() {
        move = -num * 960 + 'px';
        $('#lunbo ul').animate({
            marginLeft: move
        }, 200);
        $('#point p').eq(num).addClass('current').siblings().removeClass('current');
    }


    /*自動輪播定時器*/
    timer = setInterval(changeImg, 2000);

    function changeImg() {
        if (num < 4) {
            num++;
        } else {
            num = 0;
        }
        console.log(num);
        changgeMg();
    }


});