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

效果图

ad.html

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

base.css https://www.cnblogs.com/chenyingying0/p/12363689.html
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{
        padding-left:
        padding-right:
    .fl{
        float:left;
    }
    .fr{right;
    }
    提取出过渡样式，可公用
    .transition{
        -webkit-transition:all .5s;
        -moz-transition:
        -ms-transition:
        -o-transition:
        transition:all .5s;
    }
    文字隐藏
    .text-hidden{
        text-indent:-9999px;
        overflow:hidden;
    }
    .slider{728px;504px;
        position: relative;
    .slider-img{100%; relative;
    }
    fade方式
    .slide-fade .slider-img-item{ absolute;
        top:0;
        left:    
        display: none;    
    }
    slide方式
    .slide-slide .slider-img-item{100%;        
    }
    .slider-tip{12px;78px;
        bottom:24px;50%;
        margin-left:-36px;
    }
    .slider-tip-item{        
        width:8px;
        border:2px solid #e4e8eb;
        background-color: #313a43;
        margin-right:10px;
        border-radius:50%;
    }
    .slider-tip-item-active{#e4e8eb;2px solid #313a43;
    }
    .slider-tip-item:last-child{0;
    }
    .slider-arrow{
        display: none;30px;40px;
        line-height:
        margin-top:-20px;rgba(0,.5);
        color:
        text-align: center;
        font-size:20px;
        font-family:simsum;
    }
    .slider-arrow-left{
    .slider-arrow-right{
        right:0;
    }
todays
    .todays .slider{158px;
        margin-bottom:0;
    }

transition.js https://www.cnblogs.com/chenyingying0/p/12363649.html
move.js https://www.cnblogs.com/chenyingying0/p/12380632.html
slider.js https://www.cnblogs.com/chenyingying0/p/12391919.html
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=(){
            图片加载完成后执行回调
            if(typeof errorCall==="function") errorCall(url);
        }        
        图片加载完成后执行回调
        img.onload=(){                
            typeof loadedCall==="function") loadedCall(url);
        }                    
        人为延迟模拟线上加载图片
        setTimeout((){
            img.src=url;原生js对象可以使用原生js方法
        },500);        
    };

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

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

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

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

                myslider.loadImg(img.data("src"),1)">(url){        
                    img.attr("src";
                    $elem.loadedPicsNum++;

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

        绑定全部加载完毕的自定义事件
        $elem.on("slider-PicLoaded",1)">(e){
            清除事件
            $elem.off("slider-show"true"fade"从哪张开始轮播
        interval:4000xx毫秒的速度轮播        
    });

    myslider.lazyLoad(myslider.todaysSlider);
    myslider.todaysSlider.Slider({
        css3:从哪张开始轮播
        interval:1000xx毫秒的速度轮播        
    });

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

相关文章