JQUERY 轮播插件

闲来无事，写个轮播插件，项目中用到的时候就无需在写了，不然会累死宝宝的

废话少说 代码上

html部分

<div class="lunbo">
        <ul>
            <li class="xianshi"><a href="#"><img src="bg_img1.jpg" alt=""/></a> </li>
            <li><a href="#"><img src="bg_img2.jpg" alt=""/></a> </li>
            <li><a href="#"><img src="bg_img3.jpg" alt=""/></a> </li>
            <li><a href="#"><img src="bg_img4.jpg" alt=""/></a> </li>
            <li><a href="#"><img src="bg_img5.jpg" alt=""/></a> </li>
        </ul>
        <ol>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
</div>

接着就是css

   *{margin: 0;padding: 0}
        .lunbo{
            width: 800px;
            height: 400px;
            border:1px solid yellowgreen;
            margin: 100px  auto  0 auto;
            position: relative;
        }
        ul{list-style: none;
             width: 800px;
            height: 400px;
            position: relative;

        }
        ul img{
            width: 800px;
            height: 100%;

        }
        /*注意li绝对定位，使得他们在同一个地方显示，只是每一个的Z-index值不同，所以只会显示最后一个在最上面*/
        /*你不信试试给不同的Z-index不同的值*/
        ul>li{
            position: absolute;
            height: 100%;
            display: none;
        }
        ol{
            list-style: none;
            position: absolute;
            bottom: 20px;
            right: 20px;
        }
        ol>li{
            float: left;
            width: 14px;
            height: 14px;
           border-radius: 7px;
            background-color: orangered;
            margin-right: 10px;
        }

接下来在你的页面中引入插件，并给你的插件方法传递一个对象

 $("ul>li").lunbotu({
        ImgLength:$("ul>li").length-1,//img图片的个数
        speed:5000,//每次轮播的间隔时间
        fousejiao:"#fff",//当图轮播或点击在某个小序号时候得到焦点样式
        blurjiao:"orangered"//失去焦点
    });

紧接着就是我们的轮播实现的代码，往下看

(function(){
    //轮播插件
    $.fn.extend({
        lunbotu:function(Canshu){
            var timer1,timer2;
            var i=1;
            var xuhao=0;
            var $ul_li=$("ul>li");
            var $ol_li=$("ol>li");
            //初次加载的时候出发轮播
            $ol_li.css({background:Canshu.blurjiao});
            $ul_li.eq(0).css("display","block");
            $ol_li.eq(0).css({background:Canshu.fousejiao});
            timer1=setInterval(lunbo,Canshu.speed);
                function lunbo(){
                    if(i>Canshu.ImgLength){i=0;}
                    donghua(i);
                    i++;
                }
            //定义通用函数
            function donghua(a){
                $ul_li .fadeOut(800);
                $ol_li.css({background:Canshu.blurjiao});
                $ul_li.eq(a).fadeIn(500);
                $ol_li.eq(a).css({background:Canshu.fousejiao});
            }
            //点击ol小序列号的时候，进行操纵
            $ol_li.on("click",function(){
                clearInterval(timer1);
                clearInterval(timer2);
                var $index=$(this).index();
                donghua($index);
            });
            //鼠标从ol上面移开的时候清除定时器
            $ol_li.on("mouseleave",function(){
                clearInterval(timer1);
                clearInterval(timer2);
                //再一次出发轮播
                xuhao=$(this).index();
                timer2=setInterval(zlunbo,Canshu.speed);
                function zlunbo() {
                    if(xuhao>=Canshu.ImgLength){xuhao=-1;}
                    donghua(xuhao+1);
                    xuhao++;
                }
            });
        }
    });
}());

在本例中用了一个匿名函数避免污染全局