jq简单轮播图，易懂

先上效果图

 接下来是css

<style>
        div{
            width: 540px;
            height: 320px;
            
        }
       #one li{
            list-style-type: none;
           margin-left: -30px;
           margin-top: -15px;
        }
       #tow li{
           list-style-type: none;
            width: 30px;
           height: 30px;
           border-radius: 100%;
           background-color: #6ABB78;
           float: left;
           text-align: center;
          line-height: 30px;
           cursor: pointer;
            position: relative;
           top: -63px;
           left: 163px;
        }

    </style>

主体

<div id="first">
    <ul id="one">
        <li><img src="img/loadimg.jpg" alt=""></li>
        <li><img src="img/loadimg.jpg" alt=""></li>
        <li><img src="img/loadimg.jpg" alt=""></li>
        <li><img src="img/loadimg.jpg" alt=""></li>
        <li><img src="img/loadimg.jpg" alt=""></li>
    </ul>
    <ul id="tow">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>

接下来script      

<script>
    var num = 0; // 下标
    var num2 = true; // 判断
    setInterval(lunbo,1200); // 定时函数
    function lunbo() {
        if (num2 == true){
            // 根据下标来选择要显示的元素 其他的兄弟给隐藏就好了
            $("#one>li").eq(num).fadeIn(500).siblings().hide();
            $("#tow>li").eq(num).css("background-color","red").siblings().css("background-color","")
            num++;
            if (num == $("#one>li").length){
                num = 0;
            }
        }
    }

    $("#tow>li").hover(function () {
        var index = $(this).index();
        // console.log(index);
        $("#tow>li").eq(index).css("background-color","red").siblings().css("background-color","")
        $("#one>li").eq(index).fadeIn(500).siblings().hide();
        num2 = false;
    },function () {
        num2 = true;
    });

    lunbo();
</script>