用Jquery实现轮播

1.CSS部分 

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .banner{
            position: relative;
            width: 300px;
            height: 200px;
            overflow: hidden;
        }
        .banner ul{
            position: absolute;
            bottom: 5px;
            right: 5px;
            z-index:1000;
        }
        li{
            padding: 0 5px;
            float: left;
            display:block;
            color:#FFF;
            border:#e5eaff 1px solid;
            background:#6f4f67;
            cursor:pointer;
        }
        li.on{
            background-color: coral;
        }
        img{
            position: absolute;
            width:100%;
            height:100%;
        }
    </style> 

2.HTML部分

<div class="banner">
        <ul>
            <li class="on">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        
        <div class="list">
            <img src="imgs/1.jpg">
            <img src="imgs/2.jpg">
            <img src="imgs/3.jpg">
            <img src="imgs/4.jpg">
        </div>
    </div>

3.js部分

<script src="js/jquery.js"></script>
<script>
    var n= 0,t;
    $("li").on("click",function(){
        var i = $(this).text()-1;
        //按钮的切换
        $(this).toggleClass("on");
        $(this).siblings().removeAttr("class");
        //图片的切换
        $("img").eq(i).delay(1000).css("z-index","100");
        $("img").eq(i).siblings().delay(50).css("z-index","");
    });
    //初始化显示第一张图片
    $("img").eq(0).css("z-index","100");
    $("img").eq(0).siblings().css("z-index","");
    //开启自动化显示
    t=setInterval("show()", 4000);

    function show(){
        n = n>3?0:++n;
        $("li").eq(n).trigger('click');
    }
</script>