jq轮播图实现

html基本框架如下：

 1 <div class="out">
 2     <ul class="img">
 3         <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
 4         <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
 5         <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
 6         <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
 7         <li><a href="#"><img src="images/5.jpg" alt=""></a></li>
 8     </ul>
 9     <ul class="num"></ul>
10     <div class="left btn"><</div>
11     <div class="right btn">></div>
12 </div>

它的css样式如下：（供参考）

<style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        .out{
            width: 730px;
            height: 454px;
            margin: 50px auto;
            position: relative;
        }
        .out .img li{
            position: absolute;
            left: 0;
            top: 0;
        }
        .out .num{
            position: absolute;
            left:0;
            bottom: 20px;
            text-align: center;
            font-size: 0;
            width: 100%;
        }
        .out .btn{
            position: absolute;
            top:50%;
            margin-top: -30px;
            width: 30px;
            height: 60px;
            background-color: aliceblue;
            color: black;
            text-align: center;
            line-height: 60px;
            font-size: 40px;
            display: none;
        }
        .out .num li{
            width: 20px;
            height: 20px;
            background-color: black;
            color: #fff;
            text-align: center;
            line-height: 20px;
            border-radius: 60%;
            display: inline;
            font-size: 18px;
            margin: 0 10px;
            cursor: pointer;
        }
        .out .num li.active{
            background-color: red;
        }
        .out .left{
            left: 0;
        }
        .out .right{
            right: 0;
        }
        .out:hover .btn{
            display: block;
            color: white;
            font-weight: 900;
            background-color: black;
            opacity: 0.8;
            cursor: pointer;    /* 页面显示一个手势样*/
        }
        .out img {
            height: 100%;
            width: 100%;
        }
    </style>

接下来就是重头戏了，看看js实现：

引入的jquery要放在自己写的js代码上面；

<script src="jquery-1.9.1.min.js"></script>
<script>

    $(function(){
        var size=$(".img li").size();  //首先获取到图片的长度
        for (var i= 1;i<=size;i++){
            var li="<li>"+i+"</li>";
            $(".num").append(li); //动态添加底部小圆点
        }
        $(".num li").eq(0).addClass("active");


        $(".num li").mouseover(function(){
            $(this).addClass("active").siblings().removeClass("active"); //给你放上的底部圆点添加样式，其它的圆点去掉active样式
            var index=$(this).index();
            i=index;
            $(".img li").eq(index).fadeIn(1000).siblings().fadeOut(1000); //第index个图片淡入，其它的图片淡出
        });
        i=0;
        var t=setInterval(move,1500);// setInterval方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭
        function move(){
            i++;
            if(i==size){
                i=0; //达到图片的尾部时，返回开头
            }
            $(".num li").eq(i).addClass("active").siblings().removeClass("active");
            $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
        }

        function moveL(){
            i--;
            if(i==-1){
                i=size-1;
            }
            $(".num li").eq(i).addClass("active").siblings().removeClass("active");
            $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
        }
        $(".out").hover(function(){  //鼠标悬停时，停止调用函数
            clearInterval(t);
        },function(){    //鼠标移开之后定时器启动
            t=setInterval(move,1500);
        });

        $(".out .right").click(function(){
            move()
        });
        $(".out .left").click(function(){
            moveL()
        })

    });
</script>