效果图
ad.html
<!@H_403_12@DOCTYPE html@H_403_12@>@H_403_12@
<@H_403_12@html @H_403_12@lang@H_403_12@="en"@H_403_12@head@H_403_12@>@H_403_12@
Meta @H_403_12@charset@H_403_12@="UTF-8"@H_403_12@title@H_403_12@>@H_403_12@ad</@H_403_12@link @H_403_12@rel@H_403_12@="stylesheet"@H_403_12@ href@H_403_12@="../css/base.css"@H_403_12@="../css/ad.css"@H_403_12@body@H_403_12@<!--@H_403_12@ 今日推荐 @H_403_12@-->@H_403_12@
div @H_403_12@class@H_403_12@="todays"@H_403_12@>@H_403_12@
="container"@H_403_12@>@H_403_12@
="slider fl"@H_403_12@ id@H_403_12@>@H_403_12@
="slider-img"@H_403_12@>@H_403_12@
a @H_403_12@href@H_403_12@="#"@H_403_12@ class@H_403_12@="slider-img-item"@H_403_12@>@H_403_12@
img @H_403_12@src@H_403_12@="../img/todays-slider/loading.gif"@H_403_12@ data-src@H_403_12@="../img/todays-slider/1.png"@H_403_12@="slider-pic fl"@H_403_12@="../img/todays-slider/2.png"@H_403_12@="../img/todays-slider/3.png"@H_403_12@="../img/todays-slider/4.png"@H_403_12@="../img/todays-slider/5.png"@H_403_12@a@H_403_12@="../img/todays-slider/6.png"@H_403_12@="../img/todays-slider/7.png"@H_403_12@="../img/todays-slider/8.png"@H_403_12@="../img/todays-slider/9.png"@H_403_12@="../img/todays-slider/10.png"@H_403_12@="../img/todays-slider/11.png"@H_403_12@div@H_403_12@="javascript:;"@H_403_12@="slider-arrow slider-arrow-left"@H_403_12@>@H_403_12@<@H_403_12@="slider-arrow slider-arrow-right"@H_403_12@>@H_403_12@>@H_403_12@
>@H_403_12@
script @H_403_12@="../js/jquery.js"@H_403_12@></@H_403_12@script@H_403_12@="../js/transition.js"@H_403_12@="../js/move.js"@H_403_12@="../js/slider.js"@H_403_12@="../js/ad.js"@H_403_12@html@H_403_12@>@H_403_12@
base.css https://www.cnblogs.com/chenyingying0/p/12363689.html
ad.css
.container@H_403_12@{
width@H_403_12@:1200px@H_403_12@;
margin@H_403_12@:0 auto@H_403_12@;
}
/*@H_403_12@showhide@H_403_12@*/@H_403_12@
.fadeOut@H_403_12@{
opacity@H_403_12@: 0@H_403_12@;
visibility@H_403_12@: hidden@H_403_12@;
}
.slideUpDownCollapse@H_403_12@{
height@H_403_12@:0 !important@H_403_12@;避免因为优先级不够而无法生效@H_403_12@*/@H_403_12@
padding-top@H_403_12@:0 !important@H_403_12@;
padding-bottom@H_403_12@:0 !important@H_403_12@;
}
.slideLeftRightCollapse@H_403_12@{
padding-left@H_403_12@:
padding-right@H_403_12@:
.fl@H_403_12@{
float@H_403_12@:left@H_403_12@;
}
.fr@H_403_12@{right@H_403_12@;
}
提取出过渡样式,可公用@H_403_12@
.transition@H_403_12@{
-webkit-transition@H_403_12@:all .5s@H_403_12@;
-moz-transition@H_403_12@:
-ms-transition@H_403_12@:
-o-transition@H_403_12@:
transition@H_403_12@:all .5s@H_403_12@;
}
文字隐藏@H_403_12@
.text-hidden@H_403_12@{
text-indent@H_403_12@:-9999px@H_403_12@;
overflow@H_403_12@:hidden@H_403_12@;
}
.slider@H_403_12@{728px@H_403_12@;504px@H_403_12@;
position@H_403_12@: relative@H_403_12@;
.slider-img@H_403_12@{100%@H_403_12@; relative@H_403_12@;
}
fade方式@H_403_12@
.slide-fade .slider-img-item@H_403_12@{ absolute@H_403_12@;
top@H_403_12@:0@H_403_12@;
left@H_403_12@:
display@H_403_12@: none@H_403_12@;
}
slide方式@H_403_12@
.slide-slide .slider-img-item@H_403_12@{100%@H_403_12@;
}
.slider-tip@H_403_12@{12px@H_403_12@;78px@H_403_12@;
bottom@H_403_12@:24px@H_403_12@;50%@H_403_12@;
margin-left@H_403_12@:-36px@H_403_12@;
}
.slider-tip-item@H_403_12@{
width@H_403_12@:8px@H_403_12@;
border@H_403_12@:2px solid #e4e8eb@H_403_12@;
background-color@H_403_12@: #313a43@H_403_12@;
margin-right@H_403_12@:10px@H_403_12@;
border-radius@H_403_12@:50%@H_403_12@;
}
.slider-tip-item-active@H_403_12@{#e4e8eb@H_403_12@;2px solid #313a43@H_403_12@;
}
.slider-tip-item:last-child@H_403_12@{0@H_403_12@;
}
.slider-arrow@H_403_12@{
display@H_403_12@: none@H_403_12@;30px@H_403_12@;40px@H_403_12@;
line-height@H_403_12@:
margin-top@H_403_12@:-20px@H_403_12@;rgba(0,.5)@H_403_12@;
color@H_403_12@:
text-align@H_403_12@: center@H_403_12@;
font-size@H_403_12@:20px@H_403_12@;
font-family@H_403_12@:simsum@H_403_12@;
}
.slider-arrow-left@H_403_12@{
.slider-arrow-right@H_403_12@{
right@H_403_12@:0@H_403_12@;
}
todays@H_403_12@
.todays .slider@H_403_12@{158px@H_403_12@;
margin-bottom@H_403_12@:0@H_403_12@;
}
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
//@H_403_12@通用slider@H_403_12@
var@H_403_12@ myslider={};
myslider.bannerSlider@H_403_12@=$("#banner");
myslider.todaysSlider@H_403_12@=$("#todays");
myslider.loadImg@H_403_12@=function@H_403_12@(url,loadedCall,errorCall){
@H_403_12@var@H_403_12@ img=new@H_403_12@ Image();创建一个<img>标签,这个是原生的js对象@H_403_12@
图片加载失败时执行回调@H_403_12@
img.onerror=(){
@H_403_12@图片加载完成后执行回调@H_403_12@
if@H_403_12@(typeof@H_403_12@ errorCall==="function") errorCall(url);
}
@H_403_12@图片加载完成后执行回调@H_403_12@
img.onload=(){
@H_403_12@typeof@H_403_12@ loadedCall==="function") loadedCall(url);
}
@H_403_12@人为延迟模拟线上加载图片@H_403_12@
setTimeout((){
img.src@H_403_12@=url;原生js对象可以使用原生js方法@H_403_12@
},500);
};
myslider.lazyLoad@H_403_12@=($elem){
@H_403_12@设置全局变量的属性@H_403_12@
$elem.loadedPics={};用来保存已经加载过的图片@H_403_12@
$elem.loadedPicsNum=0;已经加载的图片数量@H_403_12@
$elem.totalPicsNum=$elem.find(".slider-pic").length;总共需要加载的图片数量@H_403_12@
接收到开始显示图片的消息@H_403_12@
$elem.on("slider-show",$elem.loadFn=(e,i,elem){
@H_403_12@if@H_403_12@($elem.loadedPics[i] !== "loaded"){
$elem.trigger(@H_403_12@"slider-loadPic",[i,elem]);
}
});
@H_403_12@绑定开始加载图片的自定义事件@H_403_12@
$elem.on("slider-loadPic",按需加载@H_403_12@
var@H_403_12@ imgs=$(elem).find(".slider-pic");
imgs.each(@H_403_12@function@H_403_12@(_,el){通常用下换线表示占位,用不到的参数@H_403_12@
$(el);
myslider.loadImg(img.data(@H_403_12@"src"),1)">(url){
img.attr(@H_403_12@"src"403_12@="loaded";
$elem.loadedPicsNum@H_403_12@++;
@H_403_12@if@H_403_12@($elem.loadedPicsNum===$elem.totalPicsNum){
@H_403_12@ 全部加载完毕@H_403_12@
$elem.trigger("slider-PicLoaded");
}
},@H_403_12@(url){
img.attr(@H_403_12@"src","img/focus-slider/placeholder.png");
});
});
})
@H_403_12@绑定全部加载完毕的自定义事件@H_403_12@
$elem.on("slider-PicLoaded",1)">(e){
@H_403_12@清除事件@H_403_12@
$elem.off("slider-show"403_12@true@H_403_12@403_12@403_12@"fade"403_12@0,1)">从哪张开始轮播@H_403_12@
interval:4000xx毫秒的速度轮播 @H_403_12@
});
myslider.lazyLoad(myslider.todaysSlider);
myslider.todaysSlider.Slider({
css3:@H_403_12@403_12@"slide"从哪张开始轮播@H_403_12@
interval:1000xx毫秒的速度轮播 @H_403_12@
});