jQuery实现图片轮播效果

整理以前用jQuery实现的图片轮播效果。
 1. 不做操作时，自动轮播
 2. 鼠标悬浮在图片上时，停止自动轮播，隐藏在图片左右的箭头会显示出来
 3. 手动轮播1：鼠标指向图片底部的小标按钮，可以切换对应的图片
 4. 手动轮播2：点击左右箭头也可以切换图片

---

效果图：（PS：用软件捕捉的，不太会弄，感觉图片都失真了）

---

下面是代码区域：

**inde.html部分代码**

<div class="box">
    <ul class="img">
        <li class="photo"><a href="#"><img src="images/1.jpg" alt=""/></a></li>
        <li class="photo"><a href="#"><img src="images/2.jpg" alt=""/></a></li>
        <li class="photo"><a href="#"><img src="images/3.jpg" alt=""/></a></li>
        <li class="photo"><a href="#"><img src="images/4.jpg" alt=""/></a></li>
        <li class="photo"><a href="#"><img src="images/5.jpg" alt=""/></a></li>
        <li class="photo"><a href="#"><img src="images/6.jpg" alt=""/></a></li>
        <li class="photo"><a href="#"><img src="images/7.jpg" alt=""/></a></li>
    </ul>
    <div>
        <span  class="jt" id="jtLeft"><</span>
        <span  class="jt" id="jtRight">></span>
    </div>
    <div class="numList"></div>
</div>

**reset.css代码**

.box{
    padding:0;
    width: 800px;
    height: 500px; 
    margin: 0 auto;
    position:relative;
}
ul.img{
    padding:0;
    margin: 0 auto;
}
ul.img .photo{
    list-style: none;
    position: absolute; 
    display: none;
}
img{
    width: 800px;
    height: 500px;
}
.box .img .active{
    display: block;
}



.jt{
    width: 40px;
    height: 50px;
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top:50%;
    margin-top: -25px;
    line-height: 50px;
    font-size: 30px; 
    color: white;
    font-weight: 800;
    text-align: center;  
    display: none;
}
#jtRight{
    right: 0;
}


.numList{
    font-size: 0;
    position: absolute;
    bottom:10px;
    left: 50%;
    margin-left:-70px; 
}
.numList .num{
    background-color: black;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: white;
    text-align: center;
    font-size: 14px;
    display: inline-block;
}
.numList .check{
    background-color: red;
}

**main.js代码**

$(function(){
    /*定义全局变量，用来记录表示显示的图片的下标*/
    var i=0;

    /*按图片的数量添加下标*/
    var size=$(".photo").size();
    for (var j=1;j<=size;j++){
        var span=$("<span class='num'>"+j+"</span>");
        $(".numList").append(span);
    }
    /*默认选中第一个下标和显示第一张图片*/
    $(".photo:eq(0)").addClass("active");
    $(".num:eq(0)").addClass("check");

    /*手动轮播*/
    var HandleImgChange=function(){
        $(".num").each(function(){
            $(this).mouseover(function(){
                $(this).siblings().removeClass("check");
                $(this).addClass("check");

                /*获得选择的下标值*/
                i=$(this).index();
                $(".photo").hide();
                $(".photo").eq(i).show();
            });
        });
    };

    /*显示下一张图*/
    var move=function(){
        i++;
        if(i>size-1){
            i=0;
        }
        $(".num").eq(i).addClass("check").siblings().removeClass("check");
        $(".photo").eq(i).show().siblings().hide();
    };

    /*自动轮播*/
    var AutoImgChange=function(){
        var t=setInterval(move,1000);
        $(".box").hover(function(){
            $(this).css({"cursor":"pointer"});
            $(".jt").css({"display":"block"});
            clearInterval(t);
        },function(){
            $(".jt").css({"display":"none"});
            t=setInterval(move,1000);
        })
    };

    /*设置左右箭头点击事件*/
    var jtL=function(){
        $("#jtLeft").click(function(){
            i--;
            if(i<0){
                i=size-1;
            }
            $(".num").eq(i).addClass("check").siblings().removeClass("check");
            $(".photo").eq(i).show().siblings().hide();
        })
    };
    var jtR=function(){
        $("#jtRight").click(function(){
            move();
        })
    };

    HandleImgChange();
    AutoImgChange();
    jtR();
    jtL();
});