效果图
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"><</a> <a href="javascript:;" class="slider-arrow slider-arrow-right">></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毫秒的速度轮播 });