jQuery封装的组件完成广告屏滑动

程序员文章站 2022-04-15 14:01:21

效果图 ad.html ad

效果图

jQuery封装的组件完成广告屏滑动

ad.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ad</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/ad.css">
</head>
<body>
    <!-- 今日推荐 -->
    <div class="todays">
        <div class="container">
            <div class="slider fl" id="todays">
                <div class="slider-img">
                    <a href="#" class="slider-img-item">
                        <img src="../img/todays-slider/loading.gif" data-src="../img/todays-slider/1.png" class="slider-pic fl">
                        <img src="../img/todays-slider/loading.gif" data-src="../img/todays-slider/2.png" class="slider-pic fl">
                        <img src="../img/todays-slider/loading.gif" data-src="../img/todays-slider/3.png" class="slider-pic fl">
                        <img src="../img/todays-slider/loading.gif" data-src="../img/todays-slider/4.png" class="slider-pic fl">
                        <img src="../img/todays-slider/loading.gif" data-src="../img/todays-slider/5.png" class="slider-pic fl">
                    </a>
                    <a href="#" class="slider-img-item">
                        <img src="../img/todays-slider/loading.gif" data-src="../img/todays-slider/6.png" class="slider-pic fl">
                        <img src="../img/todays-slider/loading.gif" data-src="../img/todays-slider/7.png" class="slider-pic fl">
                        <img src="../img/todays-slider/loading.gif" data-src="../img/todays-slider/8.png" class="slider-pic fl">
                        <img src="../img/todays-slider/loading.gif" data-src="../img/todays-slider/9.png" class="slider-pic fl">
                        <img src="../img/todays-slider/loading.gif" data-src="../img/todays-slider/10.png" class="slider-pic fl">
                    </a>
                    <a href="#" class="slider-img-item">
                        <img src="../img/todays-slider/loading.gif" data-src="../img/todays-slider/11.png" class="slider-pic fl">
                        <img src="../img/todays-slider/loading.gif" data-src="../img/todays-slider/5.png" class="slider-pic fl">
                        <img src="../img/todays-slider/loading.gif" data-src="../img/todays-slider/1.png" class="slider-pic fl">
                        <img src="../img/todays-slider/loading.gif" data-src="../img/todays-slider/3.png" class="slider-pic fl">
                        <img src="../img/todays-slider/loading.gif" data-src="../img/todays-slider/4.png" class="slider-pic fl">
                    </a>
                </div>
                <a href="javascript:;" class="slider-arrow slider-arrow-left">&lt;</a>
                <a href="javascript:;" class="slider-arrow slider-arrow-right">&gt;</a>
            </div>            
        </div>
    </div>    
    <script src="../js/jquery.js"></script>
    <script src="../js/transition.js"></script>
    <script src="../js/move.js"></script>
    <script src="../js/slider.js"></script>
    <script src="../js/ad.js"></script>
</body>
</html>

base.css
ad.css

    .container{
        width:1200px;
        margin:0 auto;
    }
    /*showhide*/
    .fadeout{
        opacity: 0;
        visibility: hidden;
    }
    .slideupdowncollapse{
        height:0 !important;/*避免因为优先级不够而无法生效*/
        padding-top:0 !important;
        padding-bottom:0 !important;
    }
    .slideleftrightcollapse{
        width:0 !important;/*避免因为优先级不够而无法生效*/
        padding-left:0 !important;
        padding-right:0 !important;
    }
    .fl{
        float:left;
    }
    .fr{
        float:right;
    }
    /*提取出过渡样式，可公用*/
    .transition{
        -webkit-transition:all .5s;
        -moz-transition:all .5s;
        -ms-transition:all .5s;
        -o-transition:all .5s;
        transition:all .5s;
    }
    /*文字隐藏*/
    .text-hidden{
        text-indent:-9999px;
        overflow:hidden;
    }
    .slider{
        width:728px;
        height:504px;
        position: relative;
        overflow:hidden;
    }
    .slider-img{
        width:100%;
        height:100%;
        position: relative;
    }
    /*fade方式*/
    .slide-fade .slider-img-item{
        width:100%;
        height:100%;
        position: absolute;
        top:0;
        left:0;    
        display: none;    
    }
    /*slide方式*/
    .slide-slide .slider-img-item{
        width:100%;
        height:100%;
        position: absolute;
        top:0;
        left:100%;        
    }
    .slider-tip{
        position: absolute;
        height:12px;
        width:78px;
        bottom:24px;
        left:50%;
        margin-left:-36px;
    }
    .slider-tip-item{        
        width:8px;
        height:8px;
        border:2px solid #e4e8eb;
        background-color: #313a43;
        margin-right:10px;
        border-radius:50%;
    }
    .slider-tip-item-active{
        background-color:#e4e8eb;
        border:2px solid #313a43;
    }
    .slider-tip-item:last-child{
        margin-right:0;
    }
    .slider-arrow{
        display: none;
        position: absolute;
        width:30px;
        height:40px;
        line-height:40px;
        top:50%;
        margin-top:-20px;
        background-color:rgba(0,0,0,.5);
        color:#e4e8eb;
        text-align: center;
        font-size:20px;
        font-family:simsum;
    }
    .slider-arrow-left{
        left:0;
    }
    .slider-arrow-right{
        right:0;
    }
/*todays*/
    .todays .slider{
        width:100%;
        height:158px;
        margin-bottom:8px;
        margin-left:0;
    }

transition.js
move.js
slider.js
ad.js

//通用slider

    var myslider={};
    myslider.bannerslider=$("#banner");
    myslider.todaysslider=$("#todays");

    myslider.loadimg=function(url,loadedcall,errorcall){
        var img=new image();//创建一个<img>标签，这个是原生的js对象
        //图片加载失败时执行回调
        img.onerror=function(){
            //图片加载完成后执行回调
            if(typeof errorcall==="function") errorcall(url);
        }        
        //图片加载完成后执行回调
        img.onload=function(){                
            if(typeof loadedcall==="function") loadedcall(url);
        }                    
        //人为延迟模拟线上加载图片
        settimeout(function(){
            img.src=url;//原生js对象可以使用原生js方法
        },500);        
    };

    myslider.lazyload=function($elem){
        //设置全局变量的属性
        $elem.loadedpics={};//用来保存已经加载过的图片
        $elem.loadedpicsnum=0;//已经加载的图片数量
        $elem.totalpicsnum=$elem.find(".slider-pic").length;//总共需要加载的图片数量

        //接收到开始显示图片的消息
        $elem.on("slider-show",$elem.loadfn=function(e,i,elem){
            if($elem.loadedpics[i] !== "loaded"){
                $elem.trigger("slider-loadpic",[i,elem]);                
            }        
        });

        //绑定开始加载图片的自定义事件
        $elem.on("slider-loadpic",function(e,i,elem){
            //按需加载
            var imgs=$(elem).find(".slider-pic");

            imgs.each(function(_,el){//通常用下换线表示占位，用不到的参数
                var img=$(el);

                myslider.loadimg(img.data("src"),function(url){        
                    img.attr("src",url);

                    $elem.loadedpics[i]="loaded";
                    $elem.loadedpicsnum++;

                    if($elem.loadedpicsnum===$elem.totalpicsnum){
                        // 全部加载完毕
                        $elem.trigger("slider-picloaded");
                    }
                },function(url){
                    img.attr("src","img/focus-slider/placeholder.png");
                });
            });        
        })

        //绑定全部加载完毕的自定义事件
        $elem.on("slider-picloaded",function(e){
            //清除事件
            $elem.off("slider-show",$elem.loadfn);
        })
    };

    myslider.lazyload(myslider.bannerslider);
    myslider.bannerslider.slider({
        css3:true,
        js:true,
        animation:"fade",
        activeidx:0,//从哪张开始轮播
        interval:4000//xx毫秒的速度轮播        
    });

    myslider.lazyload(myslider.todaysslider);
    myslider.todaysslider.slider({
        css3:true,
        js:true,
        animation:"slide",
        activeidx:0,//从哪张开始轮播
        interval:1000//xx毫秒的速度轮播        
    });

上一篇： jQuery实现网页侧栏工具条

下一篇：用Python爬E站本