可能是我的意思没表达清楚,我的js代码有2个问题,老师一直在我的问题外徘徊。。没有回答主题

可能是我的意思没表达清楚,我的js代码有2个问题,老师一直在我的问题外徘徊。。没有回答主题

// JavaScript Document
(function ($){
	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.$controlLeft=this.$elem.find(".slider-control-left");
		//this.$controlRight=this.$elem.find(".slider-control-right");
		this.$controls=this.$elem.find(".slider-control");//添加这个后上面两行不再需要
		
		//顺序不能颠倒,因_getCorrectIndex函数中用到了itemNum
		this.itemNum=this.$items.length;//获取图片的张数
		this.curIndex=this._getCorrectIndex(this.options.activeIndex);//_getCorrectIndex为了防止外面传进来的数据不符合要求
		
		this._init();
	}
	Slider.DEFAULTS={
		css3:false,
		js:false,
		animation:"fade",
		activeIndex:0,
		interval:4000,
		loop:true//值为true即无缝切换
	};
	Slider.prototype._init=function(){
		var self=this;
		//init 按钮
		this.$indicators.removeClass('slider-indicator-active');
		this.$indicators.eq(this.curIndex).addClass('slider-indicator-active');
		
		//send message
		 this.$container=this.$elem.find('.slider-container');
		 this.$container.on('move moved', function(event) {
			 var index = self.$items.index(this);

			 if (event.type === 'move') {
				 if (index === self.curIndex) {
					 self.$elem.trigger('slider-hide', [index, this]);
				 } else {
					 self.$elem.trigger('slider-show', [index, this]);
				 }
			 } else { // moved
				 if (index === self.curIndex) { // 指定的
					 self.$elem.trigger('slider-shown', [index, this]);
				 } else {
					 self.$elem.trigger('slider-hidden', [index, this]);
				 }
			 }
		 });
		
		//to  写在这里的原因:Slider已经单例处理了,而_init在Slider里执行,故这个判断只执行一次,也只需要执行一次。
		//每次点击按钮都会调用一次to,而这里的判断只需一次
		if(this.options.animation==="slide"){
		   this.$elem.addClass('slider-slide');
			
		   this.to=this._slide;
		   
		   this.$container=this.$elem.find('.slider-container');
		   this.itemWidth=this.$items.eq(0).width();
		   this.$container.css('left',-1*this.curIndex*this.itemWidth);
			
		   //move init
		   this.$container.move(this.options);
			
		   if(this.options.loop){
		       this.$container.append(this.$items.eq(0).clone());//添加上第五张图片
			   this.transitionClass=this.$container.hasClass('transition')?'transition':'';
			   this.itemNum++;//图片数量加上1
		   }
			
		   }else{
		   this.$elem.addClass('slider-fade');
		   this.$items.eq(this.curIndex).show();
			   
		   //发送消息(淡入淡出方式)
		   this.$items.on("show shown hide hidden",function(event){
		   	   self.$elem.trigger('slider-'+event.type,[self.$items.index(this),this]);
		   });
			   
		   //showHide init
		   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);//添加一个参数direction,确定滑动方向
		})
		.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)));
		});
		//给按钮绑定事件,直接给elem绑定事件
		/*this.$controlLeft.on("click",function(){
			self.to(self.curIndex-1);
		});
		this.$controlRight.on("click",function(){
			self.to(self.curIndex+1);
		});*/
		//auto
		if(this.options.interval && !isNaN(Number(this.options.interval))){
			this.$elem.hover($.proxy(this.pause,this),$.proxy(this.auto,this));
		    this.auto();
		   }
	};
	//Slider.prototype.to=function(index){};  _init中添加判断后不再需要
	Slider.prototype._getCorrectIndex=function(index,maxNum){//对索引值进行处理
		maxNum=maxNum||this.itemNum;//为了后面_slide小圆点切换正常(赋值maxNum就采用maxNum的值,如果没有就图片的张数)
		if(isNaN(Number(index)))return 0;
		if(index<0)return maxNum-1;
		if(index>maxNum-1)return 0;
		return index;
	};
	Slider.prototype._activateIndicators=function(index){
		this.$indicators.removeClass('slider-indicator-active');
		this.$indicators.eq(index).addClass('slider-indicator-active');
	};
	Slider.prototype._fade=function(index){
		if(this.curIndex===index)return;//当前图片没有发生变化,不再执行_fade
		
		this.$items.eq(this.curIndex).showHide('hide');
		this.$items.eq(index).showHide('show');
		
		this._activateIndicators(index);
		
		this.curIndex=index;
	};
	Slider.prototype._slide=function(index,direction){
		if(this.curIndex===index)return;//当前图片没有发生变化,不再执行_slide
		
		var self=this;
		
		this.$container.move('x',-1*index*this.itemWidth);
		
		this.curIndex=index;
		
		if(this.options.loop && direction){
			if(direction<0){//点击右按钮
				if(index===0){
				    this.$container.removeClass(this.transitionClass).css('left',0);
					this.curIndex=index=1;
					setTimeout(function(){
						self.$container.addClass(self.transitionClass).move('x',-1*index*self.itemWidth);
					},20);
				}
			}else{//点击左按钮
				if(index===this.itemNum-1){
				    this.$container.removeClass(this.transitionClass).css('left',-1*index*this.itemWidth);
					this.curIndex=index=this.itemNum-2;
					setTimeout(function(){
						self.$container.addClass(self.transitionClass).move('x',-1*index*self.itemWidth);
					},20);
				}
			}
			index=this._getCorrectIndex(index,this.itemNum-1);
		}
		this._activateIndicators(index);	
	};
	Slider.prototype.auto=function(){
		var self=this;
		this.intervalId=setInterval(function(){
			self.to(self._getCorrectIndex(self.curIndex+1),-1);//添加-1为了滑入方式切换幻灯片,与_getCorrectIndex保持一致(等价于右按钮)
		},self.options.interval);
	};
	Slider.prototype.pause=function(){
		clearInterval(this.intervalId);
	};
	$.fn.extend({
		slider:function(option){
			return this.each(function(){
				var $this=$(this);
				var slider=$this.data('slider');
				var canshu=$.extend({},Slider.DEFAULTS,$this.data(),typeof option==='object'&&option);
				//首先是默认参数,然后是data-active="menu",最后是传参数时的参数
				if(!slider){//如果没有值就进入if判断,添加上实例化的对象;有值的话就不会进入if判断再次实例化了
					$this.data('slider',slider=new Slider($this,canshu));
				}
				//if(typeof option === 'string')这样写不容许出错
				if(typeof slider[option]==='function'){
					slider[option]();
				}
			});
		}
	});
})(jQuery);
var $slider=$(".slider");
$slider.on("slider-show slider-shown slider-hide slider-hidden",function(event,i,elem){
	console.log(event.type+i);
});
$slider.on("slider-show",function(event,i,elem){
	//按需加载
});
$slider.slider({
	css3:false,
	js:true,
	animation:"slide",
	activeIndex:0,
	interval:0,
	loop:true
});

老师之前的回答是修改传递的参数,好像一点意义都没有,改动的地方都没错误

问题是关于滑入滑出的第2种实现方式(我觉得有可能是Slider.prototype._slide和move moved出问题了,但是想不明白错哪了)

1.点击右按钮和左按钮边界(最后一张和第一张)切换的时候有问题

2.发送消息测试的时候一直输出slider-show-1 slider-hidden-1,不是想要的结果

正在回答 回答被采纳积分+1

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

2回答
好帮手慕星星 2020-02-18 14:54:06

同学你好,当前小节中轮播不完善,所以有些功能并不能实现。

在后面幻灯片加载课程中老师重新进行了封装修改,定位添加在了每个小图片盒子上,并不是大盒子上,消息也可以正常发送,边界的问题后面课程中也修改正确了,当前问题可以先不考虑,建议继续往下面看哦。

祝学习愉快!

  • 提问者 迷失的小麦 #1
    老师用的是第一种方式往后讲的代码,请问我的这两个问题(第二种方式的问题)在后面哪小节讲到了,如果没有,还请老师帮我解答问题
    2020-02-18 14:58:18
  • 好帮手慕星星 回复 提问者 迷失的小麦 #2
    明白同学的意思了,已经将这两个问题反馈给授课老师,有处理结果后会在当前问题下进行回复的,请耐心等待。祝学习愉快!
    2020-02-18 19:24:04
好帮手慕星星 2020-02-18 12:53:51

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

1、是课程中代码的问题。视频中用css3测试效果没有问题,但是用js测试边界效果就会出现问题。已经反馈给老师,有结果后会立即通知的。

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

2、出现这种结果的原因是:

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

这段代码后面老师就不需要了,可以不添加。

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

  • 提问者 迷失的小麦 #1
    关于第一个问题结果出来后,我在哪里能看到解析(用css3测试效果没有) 关于第二个问题:那用这种方式轮播图岂不是无法发送消息了,不添加的话
    2020-02-18 13:20:28
  • 提问者 迷失的小麦 #2
    老师可能没仔细看我的代码,我已经如此设置了 $slider.slider({ css3:false, js:true, animation:"slide", activeIndex:0, interval:0, loop:true });
    2020-02-18 13:24:17
  • 提问者 迷失的小麦 #3
    不好意思老师,我看反了。。我的错
    2020-02-18 13:27:30
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上,带你深入理解企业开发核心思想,完成一个企业级网页的开发,体验前端工程师的成就感。

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

在线咨询

领取优惠

免费试听

领取大纲

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