jquery幻灯片淡入淡出组件封装
程序员文章站
2022-04-15 14:07:39
效果图 slider.html slider
效果图
slider.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slider</title>
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/slider.css">
</head>
<body>
<div class="slider">
<div class="slider-img slide-fade">
<a href="#" class="slider-img-item"><img src="../img/focus-slider/1.png"></a>
<a href="#" class="slider-img-item"><img src="../img/focus-slider/2.png"></a>
<a href="#" class="slider-img-item"><img src="../img/focus-slider/3.png"></a>
<a href="#" class="slider-img-item"><img src="../img/focus-slider/4.png"></a>
</div>
<ol class="slider-tip">
<li class="slider-tip-item text-hidden fl">1</li>
<li class="slider-tip-item text-hidden fl">2</li>
<li class="slider-tip-item text-hidden fl">3</li>
<li class="slider-tip-item text-hidden fl">4</li>
</ol>
<a href="javascript:;" class="slider-arrow slider-arrow-left"><</a>
<a href="javascript:;" class="slider-arrow slider-arrow-right">></a>
</div>
<script src="../js/jquery.js"></script>
<script src="../js/transition.js"></script>
<script src="../js/showhide.js"></script>
<script src="../js/slider.js"></script>
<script>
//传入自定义参数
$(".slider").slider({
css3:true,
js:true,
animation:"fade",
activeidx:0,//从哪张开始轮播
interval:1000//300毫秒的速度轮播
});
//接收消息，实现按需加载（幻灯片接收消息，父元素实现事件代理）
$(".slider-img").on("slider-show",function(e,i,elem){
console.log(i);//里面的事件根据自己需求来写
});
</script>
</body>
</html>
base.css
slider.css
/*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;
}
.slide-fade .slider-img-item{
width:100%;
height:100%;
position: absolute;
top:0;
left:0;
display: none;
}
.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;
}
transition.js
showhide.js
slider.js
(function($){
'use strict';//使用严格模式
//构造函数形式
function slider(elem,options){
//保存到this中才能公用
this.elem=elem;
this.picbox=this.elem.find(".slider-img");
this.options=options;
this.pics=this.elem.find(".slider-img-item");
this.tips=this.elem.find(".slider-tip-item");
this.arrows=this.elem.find(".slider-arrow");
this.curidx=this._getidx(this.options.activeidx);
this.size=this.pics.length;
this._init();//初始化，下划线开头通常约定为仅供内部使用
}
//默认参数
slider.defaults={
css3:false,
js:false,
animation:"fade",
activeidx:0,//从哪张开始轮播
interval:0//默认没有自动轮播
};
//初始化
slider.prototype._init=function(){
var self=this;
//显示指定圆点
this.tips.removeclass("slider-tip-item-active");
this.tips.eq(this.curidx).addclass("slider-tip-item-active");
//指定动画方式 to
if(this.options.animation==="slide"){
this.picbox.addclass("slide-slide");
this.to=this._slide;
}else{
this.picbox.addclass("slide-fade");
//显示指定图片
this.pics.eq(this.curidx).show();
this.to=this._fade;
}
//showhide init控制幻灯片的显示隐藏
this.pics.showhide(this.options);
//鼠标移入显示左右箭头
this.elem.hover(function(){
self.arrows.show();
},function(){
self.arrows.hide();
}).on("click",".slider-arrow-left",function(){
//事件代理
self.to(self._getidx(self.curidx-1));
}).on("click",".slider-arrow-right",function(){
self.to(self._getidx(self.curidx+1));
}).on("click",".slider-tip-item",function(){
self.to(self._getidx(self.tips.index(this)));
//self.tips.index(this)是当前点击的圆点的索引
});
//auto
if(this.options.interval && !isnan(number(this.options.interval))){
//鼠标移入时暂停自动切换
this.elem.hover($.proxy(this.pause,this),$.proxy(this.auto,this));
self.auto();
}
//发送消息（调用showhide模块的是幻灯片元素，因此发送接收消息的也是幻灯片元素）
this.pics.on("show shown hide hidden",function(e){
self.pics.trigger("slider-"+e.type,[self.pics.index(this),this]);
//返回的数组包含当前图片的索引+触发事件的对象
})
};
//获取合理的索引
slider.prototype._getidx=function(index){
if(isnan(number(index))) return 0;
if(number(index)<0) return this.size-1;
if(number(index)>this.size-1) return 0;
return index;
}
//淡入淡出方式
slider.prototype._fade=function(index){
if(this.curidx===index) return;//点击当前索引不再切换
this.pics.eq(this.curidx).showhide("hide");
this.pics.eq(index).showhide("show");
this.tips.eq(this.curidx).removeclass("slider-tip-item-active");
this.tips.eq(index).addclass("slider-tip-item-active");
this.curidx=index;
}
//滑动方式
slider.prototype._slide=function(){
}
//自动
slider.prototype.auto=function(){
var self=this;
this.timer=setinterval(function(){
self.to(self._getidx(self.curidx+1));
},self.options.interval);
}
//停止
slider.prototype.pause=function(){
clearinterval(this.timer);
}
//插件形式
$.fn.extend({
slider:function(opt){
//return this可以返回对象，方便连写
return this.each(function(){
var ui=$(this);
var slider=ui.data("slider");
//opt是参数对象
var options=$.extend({},slider.defaults,ui.data(),typeof opt==="object"&&opt);
//单例：一个dom元素对应一个实例，如果已经存在则不需要反复实例化
if(!slider){
slider=new slider(ui,options);
ui.data("slider",slider);
}
//opt是show或者hide
if(typeof slider[opt]==="function"){
slider[opt]();
}
});
}
});
})(jquery);
//为了防止$符发生冲突，将jquery作为参数传入，则$符作为内部变量，不会发生冲突
下一篇： Mysql面试题