关于封装的Slider的问题
// JavaScript Document
function Slider(el,options){
var defaults={
initIndex:0,
speed:300,
hasIndicator:false
};
//获取用户传入的数据,如有就用用户的,如没有就用设定的值
this.options={};
this.options.initIndex=typeof options.initIndex!=='undefined'?options.initIndex:defaults.initIndex;
this.options.speed=typeof options.speed!=='undefined'?options.speed:defaults.speed;
this.options.hasIndicator=typeof options.hasIndicator!=='undefined'?options.hasIndicator:defaults.hasIndicator;
//获取元素
this.el=el;
this.itemContainer=el.querySelector('.slider-item-container');
this.items=this.itemContainer.children;
this.distancePerSlide=this.items[0].offsetWidth;//一张图片的宽度
//索引值
this.minIndex=0;
this.maxIndex=this.items.length-1;
//this.index=this.options.initIndex;//如:这样写,当用户写的值为10,就会出错
this.index=this._adjustIndex(this.options.initIndex);
this.move(this.getDistanceByIndex(this.index));//调用移动函数移动幻灯片
if(this,options.hasIndicator){//根据用户的需求判断是否创建指示器,并进行切换
this._createIndicators();
this._seteIndicatorActive(this.index);
}
}
Slider.prototype.to=function(index){//带有动画的切换
this.index=index;
this._setTransitionSpeed(this.options.speed);
this.move(this.getDistanceByIndex(this.index));//调用移动函数移动幻灯片
var self=this;
this.itemContainer.addEventListener('transitionend',function(){
self._setTransitionSpeed(0);
},false);
if(this.options.hasIndicator){
this._seteIndicatorActive(this.index);
}
};
Slider.prototype._setTransitionSpeed=function(speed){//设置transition的速度
this.itemContainer.style.transitionDuration=speed+'ms';
};
Slider.prototype.prev=function(){//上一张按钮点击执行的函数
this.to(this.index-1);
};
Slider.prototype.next=function(){//下一张按钮点击执行的函数
this.to(this.index+1);
};
Slider.prototype._adjustIndex=function(index){//处理索引的函数,防止索引出错
if(index<this.minIndex){
index=this.minIndex;
}else if(index>this.maxIndex){
index=this.maxIndex;
}
return index;
};
Slider.prototype.move=function(distance){//移动函数,给出距离,然后移动
this.itemContainer.style.transform='translate3d('+distance+'px,0,0)';
};
Slider.prototype.getDistanceByIndex=function(index){//根据索引值计算移动距离
return -index*this.distancePerSlide;
};
Slider.prototype._createIndicators=function(index){//创建小圆点,即指示器
var indicatorContainer=document.createElement('div');
var html="";
indicatorContainer.className="slider-indicator-container";
for(var i=0;i<this.maxIndex+1;i++){
html+='<span class="slider-indicator"></span>';
}
indicatorContainer.innerHTML=html;
this.el.appendChild(indicatorContainer);
};
Slider.prototype._seteIndicatorActive=function(index){//切换小圆点
this.indicator=this.indicator||this.el.querySelectorAll('.slider-indicator');//短路操作符是为了防止每次触发_seteIndicatorActive都进行获取,浪费性能
for(var i=0;i<this.indicator.length;i++){
this.indicator[i].classList.remove('slider-indicator-active');
}
this.indicator[index].classList.add('slider-indicator-active');
};
var slider=new Slider(document.getElementById('slider'),{
initIndex:2,
speed:300,
hasIndicator:true
},false);
document.getElementById('prev').addEventListener("click",function(){
slider.prev();
},false);
document.getElementById('next').addEventListener("click",function(){
slider.next();
},false);Slider中写的是this.move(this.getDistanceByIndex(this.index));为什么还是会有动画效果?
动画效果_setTransitionSpeed写在to里,可调用的是move
_adjustIndex中对索引值进行了判断,为什么当我移动到边界时,如移动到第一张图片,索引值为0,继续往左移动还是可以移动?并且会报错

30
收起
正在回答
2回答
同学你好,对于同学的问题,解答如下:
1、to方法传入的参数应该是index值,而同学的这种写法this.to(this.getDistanceByIndex(this.index))传入的是需要移动的距离,这种想法是不对的。
2、接着,我们再来看to和move方法的作用。
(1)to方法的作用是根据传入的index值,移动到对应的图片。
(2)move方法的作用是设置移动位置。
如下所示代码,可知在左右切换过程中,调用的是to方法,而to方法内部调用了_setTransitionSpeed方法,所以会有动画效果

在sliders中调用move方法,是为了在初始化时,将图片移动到对应的需要显示的图片位置,例如:初始传入index的值1, 那么打开页面默认显示就是第二张图片。
同学可以试着理解下,祝学习愉快~
3.WebAPP开发与小程序
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。
了解课程


恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星