有个问题~~~~
来源：5-2 滑入滑出的第一种实现方式--实现滑动功能
七十七个七
2019-04-20 18:06:26
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>幻灯片</title>
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
<style type="text/css">
/* 共同部分 */
.slider{
width: 728px;
height: 504px;
position: relative;
overflow: hidden;
}
.slider-indicator-wrap{
position: absolute;
bottom: 24px;
left: 50%;
margin-left: -36px;
}
.slider-indicator{
width: 8px;
height: 8px;
border-radius: 50%;
background: #313a43;
margin-right: 12px;
cursor: pointer;
}
.slider-indicator-active{
position: relative;
top: -2px;
background: #f7f8f9;
border: 2px solid #858b92;
}
.slider-control{
display: none;
position: absolute;
top: 50%;
margin-top: -31px;
width: 28px;
height: 62px;
line-height: 62px;
background: #000;
opacity: 0.4;
filter: alpha(opacity=80);
color: #fff;
font-size: 22px;
text-align: center;
font-family: "宋体";
}
.slider-control-left{
left: 0;
}
.slider-control-right{
right: 0;
}
/* 淡入淡出 */
.slider-fade .slider-item{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 滑入滑出 */
.slider-slide .slider-item{
position: absolute;
top: 0;
left: 100%;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="slider" id="slider">
<div class="slider-container">
<div class="slider-item">
<a href="###" target="_blank"><img src="img/focus-slider/1.png" alt=""></a>
</div>
<div class="slider-item">
<a href="###" target="_blank"><img src="img/focus-slider/2.png" alt=""></a>
</div>
<div class="slider-item">
<a href="###" target="_blank"><img src="img/focus-slider/3.png" alt=""></a>
</div>
<div class="slider-item">
<a href="###" target="_blank"><img src="img/focus-slider/4.png" alt=""></a>
</div>
<ol class="slider-indicator-wrap">
<li class="slider-indicator text-hidden fl">1</li>
<li class="slider-indicator text-hidden fl">2</li>
<li class="slider-indicator text-hidden fl">3</li>
<li class="slider-indicator text-hidden fl">4</li>
</ol>
<a href="javascript:;" class="slider-control slider-control-left"><</a>
<a href="javascript:;" class="slider-control slider-control-right">></a>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/transition.js"></script>
<script type="text/javascript" src="js/showhide.js"></script>
<script type="text/javascript" src="move.js"></script>
<script type="text/javascript" src="slider.js"></script>
<script type="text/javascript">
var $focusSlider=$('#slider');
// $focusSlider.on('slider-show slider-shown slider-hide slider-hidden',function(e,i,elem){
// //按需加载
// })
$focusSlider.slider({
css3:true,
js:false,
animation:'fade',
// activeIndex:2,
interval:0
});
</script>
</body>
</html>(function(){
var transitionEndEventName={
transition:'transitionend',
MozTransition:'transitionend',
WebkitTransition:'webkitTransitionEnd',
OTransition:'oTransitionEnd otransitionend'
};
var transitionEnd='',
isSupport=false;
for(var name in transitionEndEventName){
if(document.body.style[name]!==undefined){
transitionEnd=transitionEndEventName[name];
isSupport=true;
break;
}
}
window.mt=window.mt||{};
window.mt.transition={
end:transitionEnd,
isSupport:isSupport
};
})();(function($){
'use strict';
var transition=window.mt.transition; //transition兼容解决，transition.js
//判断触发
function init($elem,hiddenCallback){
if($elem.is(':hidden')){
$elem.data('status','hidden');
if(typeof hiddenCallback==='function') hiddenCallback();
}else{
$elem.data('status','shown');
}
}
function show($elem,callback){
if($elem.data('status')==='show') return;
if($elem.data('status')==='shown') return;
$elem.data('status','show').trigger('show');
callback();
}
function hide($elem,callback){
if($elem.data('status')==='hide') return;
if($elem.data('status')==='hidden') return;
$elem.data('status','hide').trigger('hide');
callback();
}
var silent={
init:init,
show:function($elem){
show($elem,function(){
$elem.show();
$elem.data('status','shown').trigger('shown');
})
},
hide:function($elem){
hide($elem,function(){
$elem.hide();
$elem.data('status','hidden').trigger('hidden');
});
}
}
var css3={
//淡入淡出
fade:{
init:function($elem){
css3._init($elem,'fadeOut');
},
show:function($elem){
css3._show($elem,'fadeOut');
},
hide:function($elem){
css3._hide($elem,'fadeOut');
}
},
//卷下卷起
slideUpDown:{
init:function($elem){
css3._init($elem,'slideUpDownCollapse');
},
show:function($elem){
css3._show($elem,'slideUpDownCollapse');
},
hide:function($elem){
css3._hide($elem,'slideUpDownCollapse');
}
},
//左右展开
slideLeftRight:{
init:function($elem){
css3._init($elem,'slideLeftRightCollapse');
},
show:function($elem){
css3._show($elem,'slideLeftRightCollapse');
},
hide:function($elem){
css3._hide($elem,'slideLeftRightCollapse');
}
},
// 淡入卷起淡出展开
fadeSlideUpDown:{
init:function($elem){
css3._init($elem,'fadeOut slideUpDownCollapse');
},
show:function($elem){
css3._show($elem,'fadeOut slideUpDownCollapse');
},
hide:function($elem){
css3._hide($elem,'fadeOut slideUpDownCollapse');
}
},
// 淡入淡出左右展开
fadeSlideLeftRight:{
init:function($elem){
css3._init($elem,'fadeOut slideLeftRightCollapse');
},
show:function($elem){
css3._show($elem,'fadeOut slideLeftRightCollapse');
},
hide:function($elem){
css3._hide($elem,'fadeOut slideLeftRightCollapse');
}
}
}
css3._init=function($elem,className){
$elem.addClass('transition');
init($elem,function(){
$elem.addClass(className);
});
};
css3._show=function($elem,className){
show($elem,function(){
$elem.off(transition.end).one(transition.end,function(){
$elem.data('status', 'shown').trigger('shown');
});
$elem.show();
setTimeout(function(){
$elem.removeClass(className);
},20);
});
};
css3._hide=function($elem,className){
hide($elem,function(){
$elem.off(transition.end).one(transition.end,function(){
$elem.hide();
$elem.data('status','hidden').trigger('hidden');
})
$elem.addClass(className);
});
}
var js={
//淡入淡出
fade:{
init:function($elem){
js._init($elem);
},
show:function($elem){
js._show($elem,'fadeIn');
},
hide:function($elem){
js._hide($elem,'fadeOut');
}
},
//卷下卷起
slideUpDown:{
init:function($elem){
js._init($elem);
},
show:function($elem){
js._show($elem,'slideDown');
},
hide:function($elem){
js._hide($elem,'slideUp');
}
},
// 左右展开
slideLeftRight:{
init:function($elem){
js._customInit($elem,{
'width':0,
'padding-left':0,
'padding-right':0
});
},
show:function($elem){
js._customShow($elem);
},
hide:function($elem){
js._customHide($elem,{
'width':0,
'padding-left':0,
'padding-right':0
});
}
},
// 淡入卷起淡出展开
fadeSlideUpDown:{
init:function($elem){
js._customInit($elem,{
'opacity':0,
'height':0,
'padding-top':0,
'padding-bottom':0
});
},
show:function($elem){
js._customShow($elem);
},
hide:function($elem){
js._customHide($elem,{
'opacity':0,
'height':0,
'padding-top':0,
'padding-bottom':0
});
}
},
// 淡入淡出左右展开
fadeSlideLeftRight:{
init:function($elem){
js._customInit($elem,{
'opacity':0,
'width':0,
'padding-left':0,
'padding-right':0
});
},
show:function($elem){
js._customShow($elem);
},
hide:function($elem){
js._customHide($elem,{
'opacity':0,
'width':0,
'padding-left':0,
'padding-right':0
});
}
}
};
js._init=function($elem,hiddenCallback){
$elem.removeClass('transition');
init($elem,hiddenCallback);
};
js._customInit=function($elem,options){
// 获取元素最初始的宽
var styles={};
for(var p in options){
styles[p]=$elem.css(p);
};
$elem.data('styles',styles);
js._init($elem,function(){
$elem.css(options);
})
}
js._show=function($elem,mode){
show($elem,function(){
$elem.stop()[mode](function(){
$elem.data('status','shown').trigger('shown');
});
});
};
js._customShow=function($elem){
show($elem,function(){
var styles=$elem.data('styles');
$elem.show();
$elem.stop().animate($elem.data('styles'),function(){
$elem.data('status','shown').trigger('shown');
});
});
}
js._hide=function($elem,mode){
hide($elem,function(){
$elem.stop()[mode](function(){
$elem.data('status','hidden').trigger('hidden');
});
});
};
js._customHide=function($elem,options){
hide($elem,function(){
$elem.stop().animate(options,function(){
$elem.hide();
$elem.data('status','shown').trigger('shown');
});
});
}
var defaults={
css:false,
js:false,
animate:'fade',
};
function showHide($elem,options){
var mode=null;
if(options.css3&&transition.isSupport){
//css3 transition
mode=css3[options.animation]||css3[defaults.animation];
}else if(options.js){
// js aninmate
mode=js[options.animation]||js[defaults.animation];
}else{
// no animation
mode=silent;
}
mode.init($elem);
return{
show:$.proxy(mode.show,this,$elem),
hide:$.proxy(mode.hide,this,$elem)
};
}
// window.mt=window.mt||{};
// window.mt.showHide=showHide;
$.fn.extend({
showHide:function(option){
return this.each(function(){
var $this=$(this),
options=$.extend({},defaults,typeof option==='object'&&option),
mode=$this.data('showHide');
if(!mode){
$this.data('showHide',mode=showHide($this,options));
}
if(typeof mode[option]==='function'){
mode[option]();
}
})
}
})
})(jQuery);(function($){
'use strict';
var transition=window.mt.transition;
var init=function($elem){
this.$elem=$elem;
this.curX=parseFloat(this.$elem.css('left'));
this.curY=parseFloat(this.$elem.css('top'));
}
var to=function(x,y,callback){
x=(typeof x==='number')?x:this.curX;
y=(typeof y==='number')?y:this.curY;
if(this.curX===x&&this.curY===y) return;
this.$elem.trigger('move',[this.$elem]);
if(typeof callback==='function'){
callback();
}
this.curX=x;
this.curY=y;
}
var Silent=function($elem){
init.call(this,$elem);
this.$elem.removeClass('transition');
};
Silent.prototype.to=function(x,y){
var self=this;
to.call(this,x,y,function(){
self.$elem.css({
left:x,
top:y
});
self.$elem.trigger('moved',[self.$elem]);
})
};
Silent.prototype.x=function(x){
this.to(x);
}
Silent.prototype.y=function(y){
this.to(null,y);
}
var Css3=function($elem){
init.call(this,$elem);
this.$elem.addClass('transition');
this.$elem.css({
left:this.curX,
top:this.curY
})
}
Css3.prototype.to=function(x,y){
var self=this;
to.call(this,x,y,function(){
self.$elem.off(transition.end).one(transition.end,function(){
self.$elem.trigger('moved',[self.$elem]);
});
self.$elem.css({
left:x,
top:y
});
});
}
Css3.prototype.x=function(x){
this.to(x);
}
Css3.prototype.y=function(y){
this.to(null,y);
}
var Js=function($elem){
init.call(this,$elem);
this.$elem.removeClass('transition');
}
Js.prototype.to=function(x,y){
var self=this;
to.call(this,x,y,function(){
self.$elem.stop().animate({
left:x,
top:y
},function(){
self.$elem.trigger('moved',[self.$elem]);
});
});
}
Js.prototype.x=function(x){
this.to(x);
}
Js.prototype.y=function(y){
this.to(null,y);
}
// var $box=$('#box'),
// $goBtn=$('#go-btn'),
// $backBtn=$('#back-btn'),
// move=new Js($box);
// $box.on('move moved',function(e,$elem){
// console.log(e.type);
// console.log($elem);
// })
// $goBtn.on('click',function(){
// move.to(100,50);
// })
// $backBtn.on('click',function(){
// move.to(0,20);
// })
var defaults={
css3:false,
js:false
};
var move=function($elem,options){
var mode=null;
if(options.css3&&transition.isSupport){// Css3
mode=new Css3($elem);
}else if(options.js){// Js
mode=new Js($elem);
}else{// Silent
mode=new Silent($elem);
}
return {
to:$.proxy(mode.to,mode),
x:$.proxy(mode.x,mode),
y:$.proxy(mode.y,mode)
};
};
$.fn.extend({
move:function(option,x,y){
return this.each(function(){
var $this=$(this),
mode=$this.data('move'),
options=$.extend({},defaults,typeof option==='object'&&option);
if(!mode){
$this.data('move',mode=move($this,options));
}
if(typeof mode[option]==='function'){
mode[option](x,y);
}
});
}
});
})(jQuery);(function($){
'use strict';
function Slider($elem,options){
this.$elem=$elem;
this.options=options;
this.$items=this.$elem.find('.slider-item');
this.$indicators=this.$elem.find('.slider-indicator');
this.$controls=this.$elem.find('.slider-control');
this.itemNum=this.$items.length;
this.curIndex=this._getCorrectIndex(this.options.activeIndex);
this._init();
};
Slider.DEFAULTS={
css3:false,
js:false,
animation:'fade',
activeIndex:0,
interval:0
};
Slider.prototype._init=function(){
var self=this;
this.$indicators.removeClass('slider-indicator-active');
this.$indicators.eq(this.curIndex).addClass('slider-indicator-active');
if(this.options.animation==='slide'){
this.$elem.addClass('slider-slide');
this.$items.eq(this.curIndex).css('left',0);
this.$items.move(this.options);
this.to=this._slide;
this.itemWidth=this.$items.eq(0).width();
}else{
this.$elem.addClass('slider-fade');
this.$items.eq(this.curIndex).show();
//初始化
this.$items.showHide(this.options);
this.to=this._fade;
}
//绑定事件
this.$elem
.hover(function(){
self.$controls.show();
},function(){
self.$controls.hide();
}).on('click','.slider-control-left',function(){
self.to(self._getCorrectIndex(self.curIndex-1),1);
}).on('click','.slider-control-right',function(){
self.to(self._getCorrectIndex(self.curIndex+1),-1);
}).on('click','.slider-indicator',function(){
self.to(self._getCorrectIndex(self.$indicators.index(this)));
});
if(this.options.interval&&!isNaN(Number(this.options.interval))){
this.$elem.hover($.proxy(this.pause,this),$.proxy(this.auto,this));
this.auto();
}
//send meassage
this.$items.on('show shown hide hidden',function(e){
self.$elem.trigger('slider-'+e.type,[self.$items.index(this),this]);
});
};
Slider.prototype._getCorrectIndex=function(index){
if(isNaN(Number(index))) return 0;
if(index<0) return this.itemNum-1;
if(index>this.itemNum-1) return 0;
return index;
};
Slider.prototype._fade=function(index){
if(this.curIndex===index) return;
this.$items.eq(this.curIndex).showHide('hide');
this.$items.eq(index).showHide('show');
this.$indicators.eq(this.curIndex).removeClass('slider-indicator-active');
this.$indicators.eq(index).addClass('slider-indicator-active');
this.curIndex=index;
};
Slider.prototype._slide=function(index,direction){
if(this.curIndex===index) return;
var self = this;
//确定滑入滑出的方向
if(!direction){// 点击indicators
if(this.curIndex<index){
direction=-1;
}else if(this.curIndex>index){
direction=1;
}
}
//设置制定滑入幻灯片的初始位置
this.$items.eq(index).css('left',-1*direction*this.itemWidth);
//当前幻灯片滑出可视区域，指定幻灯片滑入可视区域
this.$items.eq(this.curIndex).move('x',direction*this.itemWidth);
this.$items.eq(index).move('x',0);
//激活indicator
this.$indicators.eq(this.curIndex).removeClass('slider-indicator-active');
this.$indicators.eq(index).addClass('slider-indicator-active');
this.curIndex===index;
};
Slider.prototype.auto=function(){
var self=this;
this.intervalId=setInterval(function(){
self.to(self._getCorrectIndex(self.curIndex+1));
},this.options.interval);
};
Slider.prototype.pause=function(){
clearInterval(this.intervalId);
};
$.fn.extend({
slider:function(option){
return this.each(function(){
var $this=$(this),
slider=$this.data('slider'),
options=$.extend({},Slider.DEFAULTS,$this.data(),typeof option==='object'&&option);
if(!slider){
$this.data('slider',slider=new Slider($this,options));
}
if(typeof slider[option]==='function'){
slider[option]();
}
});
}
});
})(jQuery);实现slide功能的时候this.curIndex和index只显示0和1.。。。切换成fade功能就没有问题
写回答
1回答
-
Miss路
2019-04-20
同学，你好。你的代码没有css样式，看不出效果。
如果是课程中老师讲过的代码，建议你对照一下源码吧，在学习初期对照源码找问题是一个必然的过程，老师帮你检查的话也是对源码，但是你自己要是通过对照找出问题的话，更会记忆犹新，并且在对照梳理的过程中思路会更加明确，更好的理解和掌握。老师能帮你的是给你解决问题的引导，以及具体问题的解答，不能总让老师帮你们对源码呀，这多没意义。得学会自己解决问题，这是以后工作中必备的技能。
如果帮助到了你，欢迎采纳！
祝学习愉快！
1
相似问题