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 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{
        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 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=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毫秒的速度轮播        
    });

来源：https://www.cnblogs.com/chenyingying0/p/12392843.html

标签

pic

jquery

src

elem

slider