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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

// 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，不是想要的结果

迷失的小麦 2020-02-17

源自：实战：中心focus区域组件化 5-6 滑入滑出的第二种实现方式--自动切换和选择

收起

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测试边界效果就会出现问题。已经反馈给老师，有结果后会立即通知的。

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

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

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

收起回答

提问者迷失的小麦 #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