用jquery制作轮播图

制作广告图片轮播切换效果，默认第1个数字背景颜色为橙色，其他背景为#333333，数字颜色为白色
鼠标移至图片上出现左右箭头，鼠标移出图片时，左右箭头消失
单击左历右箭头时，显示上一个/下一个图片，当前数字背景为橙色，其他数字背景为#333333，第一个/最后一个图片显示时，单击箭头时弹出提示

<div class="adver">
    <ul>
        <li>1li>
        <li>2li>
        <li>3li>
        <li>4li>
        <li>5li>
        <li>6li>
    ul>
    <div class="arrowLeft"><div>
    <div class="arrowRight">>div>
div>

//将背景图片路径存进数组，用jquery形式接收，不用再转换
//以下是自动轮播的方法
var $imgs = new Array("images/adver01.jpg", "images/adver02.jpg", "images/adver03.jpg", "images/adver04.jpg", "images/adver05.jpg", "images/adver06.jpg");
$(document).ready(function () {
    var num = 600;
    var i = 0;
    $(".adver").mouseout(function () {
        $(".arrowLeft").hide();
        $(".arrowRight").hide();
      autoplay();
    });
     var t;
    function autoplay() {
        t = setInterval(play, 1000);//时间函数
    }
    function play() {
        num = num + 1;
        i = num % 6;
        $(".adver").css({"background-image": "url('" + $imgs[i] + "')"});
        if (i != 0) {
            $("li:nth-of-type(" + i + ")").css({"background-color": "#333333"});
        } else {
            $("li:nth-of-type(6)").css({"background-color": "#333333"});
        }
        $("li:nth-of-type(" + (i + 1) + ")").css({"background-color": "orange"});
    }
//随鼠标点击而动
    $(".adver").mouseover(function () {
        clearInterval(t);
        $(".arrowRight").show().unbind('click').click(function () {
            i++;
            $("li:nth-of-type("+(i+1)+")").css({"background":"orange"}).siblings().css("background","#333333");
            $(".adver").css({"background-image":"url("+$imgs[i]+")"});
            if(i==5){alert("后边没有了！");}
        });
        $(".arrowLeft").show().unbind('click').click(function () {
            i--;
            $("li:nth-of-type("+(i+1)+")").css({"background":"orange"}).siblings().css("background","#333333");
            $(".adver").css({"background-image":"url("+$imgs[i]+")"});
            if(i==0){alert("前边没有了！");}
        })
    })
});

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;
}