jquery滑动模式的幻灯片组件
程序员文章站
2022-04-15 14:08:33
效果图 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-slide">
<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/move.js"></script><!-- 滑动模块 -->
<script src="../js/slider.js"></script>
<script>
$(".slider").slider({
css3:true,
js:true,
animation:"slide",
activeidx:0,//从哪张开始轮播
interval:2000//1秒的速度轮播
});
//接收消息
$(".slider-img").on("slider-show slider-shown slider-hide slider-hidden",function(e,i,elem){
console.log(i+":"+e.type);//里面的事件根据自己需求来写
});
</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;
}
/*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;
}
transition.js
showhide.js
move.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.size=this.pics.length;
this.curidx=this._getidx(this.options.activeidx);
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"){
//slide
this.picbox.addclass("slide-slide");
this.pics.eq(this.curidx).css("left",0);
//slide 模块 send message
this.pics.on("move moved",function(e){
var index=self.pics.index(this);//获取当前触发事件的幻灯片的索引
if(e.type==="move"){
//move 开始运动
if(self.curidx===index){
//这张开始隐藏
self.pics.trigger("slider-hide",[index,this]);
}else{
//这张开始显示
self.pics.trigger("slider-show",[index,this]);
}
}else{
//moved 结束运动
if(self.curidx===index){//此时已经操作了self.curidx=index; 因此情况需要相反
//这张开始隐藏
self.pics.trigger("slider-shown",[index,this]);
}else{
//这张开始显示
self.pics.trigger("slider-hidden",[index,this]);
}
}
})
//move init控制幻灯片的显示隐藏
this.pics.move(this.options);
this.to=this._slide;
this.picwidth=this.pics.eq(0).width();
//用来区分是css3动画还是js动画
//css3动画必须存在transition
//js必须移除transition
this.transitioncls=this.pics.eq(0).hasclass("transition")?"transition":"";
}else{
//fade
this.picbox.addclass("slide-fade");
//显示指定图片
this.pics.eq(this.curidx).show();
//fade 模块 发送消息（调用showhide模块的是幻灯片元素，因此发送接收消息的也是幻灯片元素）
this.pics.on("show shown hide hidden",function(e){
self.pics.trigger("slider-"+e.type,[self.pics.index(this),this]);
//返回的数组包含当前图片的索引+触发事件的对象
})
//showhide init控制幻灯片的滑动
this.pics.showhide(this.options);
this.to=this._fade;
}
//鼠标移入显示左右箭头
this.elem.hover(function(){
self.arrows.show();
},function(){
self.arrows.hide();
}).on("click",".slider-arrow-left",function(){//左箭头，图片left为正
//事件代理
self.to(self._getidx(self.curidx-1),1);//第二个参数代表滑动时的方向
}).on("click",".slider-arrow-right",function(){//右箭头，图片left为负
self.to(self._getidx(self.curidx+1),-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();
}
};
//获取合理的索引
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._activatetips=function(index){
this.tips.eq(this.curidx).removeclass("slider-tip-item-active");
this.tips.eq(index).addclass("slider-tip-item-active");
}
//淡入淡出方式
slider.prototype._fade=function(index){
if(this.curidx===index) return;//点击当前索引不再切换
this.pics.eq(this.curidx).showhide("hide");
this.pics.eq(index).showhide("show");
this._activatetips(index);
this.curidx=index;
}
//滑动方式
slider.prototype._slide=function(index,direction){
var self=this;
if(this.curidx===index) return;//点击当前索引不再切换
//确定滑入滑出方向
if(!direction){
//click tips
if(this.curidx>index){
direction=1;//向右，left为正
}else if(this.curidx<index){
direction=-1;//向左，left为负
}
}
//设置指定滑入幻灯片的初始位置
//如果left为负，代表向左，则初始位置在右，为正
//如果是css3，this.transitioncls=transition，先移除快速定位初始位置，之后再添加来滑动动画
//如果是js，this.transitioncls=""，则相当于不操作
this.pics.eq(index).removeclass(this.transitioncls).css("left",-1*direction*this.picwidth);
//当前幻灯片滑出可视区域，指定幻灯片滑入可视区域
settimeout(function(){
self.pics.eq(self.curidx).move("x",direction*self.picwidth);//当前的滑出可视区
self.pics.eq(index).addclass(self.transitioncls).move("x",0);//指定图片滑入，如果是css3，加入刚才被移除的transition
self.curidx=index;
},20)
//激活tips
this._activatetips(index);
}
//自动
slider.prototype.auto=function(){
var self=this;
this.timer=setinterval(function(){
self.to(self._getidx(self.curidx+1),-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作为参数传入，则$符作为内部变量，不会发生冲突
transition
上一篇： Vue学习之Babel配置(十六）
下一篇： Day 04