关于封装的Slider的问题

关于封装的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);
  1. Slider中写的是this.move(this.getDistanceByIndex(this.index));为什么还是会有动画效果?

    动画效果_setTransitionSpeed写在to里,可调用的是move

  2. _adjustIndex中对索引值进行了判断,为什么当我移动到边界时,如移动到第一张图片,索引值为0,继续往左移动还是可以移动?并且会报错

    http://img1.sycdn.imooc.com//climg/5e636d330920c12306750220.jpg

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,对于同学的问题,解答如下:

1、to方法传入的参数应该是index值,而同学的这种写法this.to(this.getDistanceByIndex(this.index))传入的是需要移动的距离,这种想法是不对的。

2、接着,我们再来看to和move方法的作用。

(1)to方法的作用是根据传入的index值,移动到对应的图片。

(2)move方法的作用是设置移动位置。

如下所示代码,可知在左右切换过程中,调用的是to方法,而to方法内部调用了_setTransitionSpeed方法,所以会有动画效果

http://img1.sycdn.imooc.com//climg/5e6445d5096f96ee12500660.jpg

在sliders中调用move方法,是为了在初始化时,将图片移动到对应的需要显示的图片位置,例如:初始传入index的值1, 那么打开页面默认显示就是第二张图片。

同学可以试着理解下,祝学习愉快~

好帮手慕星星 2020-03-07 18:13:56

同学你好,问题解答如下:

1、this._setTransitionSpeed(this.options.speed);只是设置动画速度的,并不是设置移动的。move方法中设置的是transform移动

http://img1.sycdn.imooc.com//climg/5e637295095561ed14810152.jpg

2、代码中只是在一开始的时候对初始索引值进行了判断,但是在移动过程中并没有,所以临界值会出现问题,参考修改:

http://img1.sycdn.imooc.com//climg/5e6373a30918a39812160278.jpg

自己再测试下,祝学习愉快!

  • 提问者 迷失的小麦 #1
    关于问题一我认为应该是this.to(this.getDistanceByIndex(this.index));而不是this.move(this.getDistanceByIndex(this.index));为什么这里没有设置transition,即_setTransitionSpeed依然有动画效果?(一开始transition设置为0,应该没有动画效果)
    2020-03-07 19:42:41
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
3.WebAPP开发与小程序
  • 参与学习           人
  • 提交作业       622    份
  • 解答问题       6815    个

微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师