fadeIndex 

<body>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        height: 30px;
        overflow: hidden;
        width: 200px;
        margin: 50px auto;
        border: 1px solid red;
    }
    li{
        height: 30px;
        line-height: 30px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        /*opacity: 0;*/
        display: none;
    }
</style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
</body>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    // $.fn.extend({
    //     fadeIndex:function(option){
    //         var defaultOption=$.extend({
    //             timeIn:1000,
    //             timeOut:2000
    //         },option);
    //         var $lis=this.find("li");
    //         var index=0;
    //         function loop(){
    //             if (index>=$lis.length) {
    //                 index=0;
    //             };
    //             $lis.eq(index).fadeIn(defaultOption.timeIn,function(){
    //                 // $lis.eq(index).delay(2000).fadeOut(defaultOption.timeOut,function(){
    //                 $lis.eq(index).fadeOut(defaultOption.timeOut,function(){
    //                     index++;
    //                     loop();
    //                 });
    //             });
    //         };
    //         loop();
    //     }
    // });
    $.fn.fadeIndex=function(option){
            var defaultOption=$.extend({
                timeIn:1000,
                timeOut:2000
            },option);
            var $lis=this.find("li");
            var index=0;
            function loop(){
                if (index>=$lis.length) {
                    index=0;
                };
                $lis.eq(index).fadeIn(defaultOption.timeIn,function(){
                    // $lis.eq(index).delay(2000).fadeOut(defaultOption.timeOut,function(){
                    $lis.eq(index).fadeOut(defaultOption.timeOut,function(){
                        index++;
                        loop();
                    });
                });
            };
            loop();
        }
    ;
    $("ul").fadeIndex({
                timeIn:200,
                timeOut:1000
            });
</script>

 

posted @ 2023-12-17 21:13  justSmile2  阅读(7)  评论(0)  编辑  收藏  举报
喵