JQUERY 轮播插件

时间：2020-12-13 07:08:29

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

废话少说 代码上

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

        .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++;

                }

            });

        }

    });

}());

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

相关文章