JQuery实现简单的轮播图基本思路

<div class="wrapper">
    <div class="banner">
        <ul class="imageList">
            <li><img src="" alt=""></li>
            <li><img src="" alt=""></li>
            <li><img src="" alt=""></li>
            <li><img src="" alt=""></li>
        </ul>
        <img src="" alt=""><img src="" alt="">
        <ul class="indexList">
            <li><img src="" alt=""></li>
            <li><img src="" alt=""></li>
            <li><img src="" alt=""></li>
            <li><img src="" alt=""></li>
        </ul>
    </div>
</div>

function changeTo(num){ 
    var goLeft = num * 800;
    $(".imgList").animate({left: "-" + goLeft + "px"},500);
    $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");
  }

var autoChange = setInterval(function () {
    if(index<3){
        index++
    }else {
        index=0
    }
    changeTo(index)
},1000);