使用jQuery实现简易的轮播图

以下是css代码

ul,li{padding: 0;margin: 0; list-style: none;}
.adver{margin: 0 auto; width: 700px; overflow: hidden; height: 454px; position: relative; background: url("../images/adver01.jpg");}
ul{position: absolute; bottom:10px; z-index: 100; width: 100%; text-align: center;}
ul li{display: inline-block; font-size: 10px; line-height: 20px; font-family: "微软雅黑"; margin: 0 1px; width: 20px; height: 20px; border-radius: 50%; background: #333333; text-align: center; color: #ffffff;}
.arrowLeft,.arrowRight{
    position: absolute;
    width: 30px;
    background:rgba(0,0,0,0.2);
    height: 50px;
    line-height: 50px;
    text-align: center;
    top:200px;
    z-index: 150;
    font-family: "微软雅黑";
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    display: none;
}
.arrowLeft{left: 10px;}
.arrowRight{right: 10px;}
li:nth-of-type(1){
    background: orange;
}

以下是jQuery代码

<link rel="stylesheet" href="css/style.css">
    //首先当然少不了jQuery导入了
    <script src="js/jquery-1.12.4.js"></script>
    <script>
     //加载文档,这里是简写,
      //可以写成$((document).ready(function(){//执行的代码})
        $(function(){
            //鼠标移至整个div时显示左右箭头
            $(".adver").mouseover(function(){
                $(".arrowRight").css("display","block")
                $(".arrowLeft").show();
            //鼠标移出整个div时隐藏左右箭头
            }).mouseout(function(){
                $(".arrowRight").hide();
                $("arrowLeft").hide()
            })
            //创建数组把照片存入集合
            var img=new Array("adver01.jpg","adver02.jpg","adver03.jpg","adver04.jpg","adver05.jpg","adver06.jpg");
            //定义数组下标
            var index=0;
            //点击左边箭头事件
            $(".arrowLeft").click(function(){

                //判断是否是第一张
                if(index==0){
                    alert("这是第一张照片！！！")
                }else{
                //点击左边箭头,每次数组下标每次减一,对应的图片向左移动
                    index--;
                //对应所处图片的下标
                    var i=index+1;
                //把图片放入整个div中
                    $(".adver").css("background","url(images/"+img[index]+")")
                //设置当前图片所处下标为red色,企业兄弟姐妹为gray色
                    $("li:nth-of-type("+i+")").css("background","red").siblings().css("background","gray")
                }
            })
            //点击右边箭头事件
            $(".arrowRight").click(function lxb(){
                //判断是否是最后一张
                if(index==img.length-1){
                  alert("这是最后一张照片！！！")
                }else{
               //点击右边箭头,每次数组下标每次加1,对应的图片向右移动
                    index++;
               //对应所处图片的下标
                    var i=index+1;
               //把图片放入整个div中
                    $(".adver").css("background","url(images/"+img[index]+")")
               //设置当前图片所处下标为red色,企业兄弟姐妹为gray色
                    $("li:nth-of-type("+i+")").css("background","red").siblings().css("background","gray")
                }
            })
            //定时器滚动图片函数
            function a(){
              //由于定时器自动滚动,所以只需向右滚动,只需判断是否为最后一张图片.数组下标从0开始,所以只需length-1就可以获取到最后1张图片
                if(index==img.length-1){
                    alert("这是最后一张照片！！！")
                }else{
                //定时器每滚动一次,每次数组下标每次加1,对应的图片向右移动
                    index++;
                  //对应所处图片的下标
                    var i=index+1;
                 //把图片放入整个div中
                    $(".adver").css("background","url(images/"+img[index]+")")
                  //设置当前图片所处下标为red色,企业兄弟姐妹为gray色 
                    $("li:nth-of-type("+i+")").css("background","red").siblings().css("background","gray")

                }
            }
           //设置定时器每1秒滚动一次
           setInterval(a,1000)
            //鼠标悬浮
            $("ul li").mouseover(function(){
                //获取li的value值
                index=parseInt($(this).attr("value"));
                 //把图片放入整个div中
                $(".adver").css("background","url(images/"+img[index]+")")
                  //设置当前图片所处下标为red色,企业兄弟姐妹为gray色 
                $("li:nth-of-type("+(index+1)+")").css("background","red").siblings().css("background","gray")
            })
        })

    </script>

以下是HTML代码

<body onload="a">
<div class="adver">
    <ul>
        <li value="0">1</li>
        <li value="1">2</li>
        <li value="2">3</li>
        <li value="3">4</li>
        <li value="4">5</li>
        <li value="5">6</li>
    </ul>
    <div class="arrowLeft"><</div><div class="arrowRight">></div>
</div>
</body>