效果图
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
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毫秒的速度轮播
});
如对本文有疑问， 点击进行留言回复！！
VScode中的react自动补全标签代码及黄色or红色警告
关于React处理input的方法和多个input共用一个方法（不用jQuery）
网友评论