可能是我的意思没表达清楚,我的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,不是想要的结果
70
收起
正在回答 回答被采纳积分+1
2回答
相似问题
登录后可查看更多问答,登录/注册
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星