jQuery 幻灯片

 jQuery 实现图片幻灯片

使用到的技巧：

1. prototype实现继承
2. 条件运算符?:
3. 求模运算符%
4. ~~
5. 使用animate()，改变margin-left值来达到图片移动的效果

效果图：

 

Demo：

function initSlider(container,nav){
    this.container = container;
    this.nav = nav.show();
    this.imgs = this.container.find("img");
    this.imgWidth = this.imgs[0].width;
    this.imgLen =this.imgs.length;
    this.current = 0;    
}

//图片移动
//改变margin-left值来达到图片移动的效果
initSlider.prototype.imgTransition = function(){
    this.container.animate({
        "margin-left" : -(this.current * this.imgWidth)
    })
}

//更新当前current值
initSlider.prototype.setCurrent = function(dir){
    var pos = this.current;

    //dir==="next" ? ++this.current : --this.current ; 
    //另一种实现方式：
    pos+= ~~(dir==="next") || -1;
    
    this.current = (pos<0)? this.imgLen-1 : pos% this.imgLen;
    return pos
}

 参考来源：https://tutsplus.com/lesson/prototypal-inheritance-and-refactoring-the-slider/

疑惑之处:关于按位非（~）操作符

~true === -2

~~true === 1

~false === -1

~~false === 0

 

为什么~true等于-2？为什么 ~false等于-1？

 

遇到的困难：

对this的指向，糊涂了几次。     --对this不够熟悉

对current值的++，--。犯错了几次。--逻辑思考能力。

 

收获：

pos+= ~~(dir==="next") || -1;

(pos<0)? this.imgLen-1 : pos% this.imgLen;

写法很帅，很惊喜！

 

 

附：另一种实现方式。

没有上面那种方式那样优雅，不过作为学习记录，也记在这里先吧。

(function($){
    var slider = $("div.slider").css("overflow","hidden").children("ul"),
        img = $("img"),
        imgLen = img.length,
        imgWidth = img[0].width,
        imgTotal = imgWidth * imgLen,
        current = 1;
    $("#slider-nav").show().find("button").on("click",function(){
        var direction = $(this).data("dir"),
            loc = imgWidth;

        ($(this).data("dir")==="next") ? ++current : --current ; //先加减，再取用current

        if(current===0){
            current = imgLen;
            direction = "next";
            loc = imgTotal - imgWidth;
        }
        else if(current-1 === imgLen){
            current = 1 ;
            loc = 0;
        }
        imgTransition(slider,loc,direction);
                                        
    });

    function imgTransition (slider,loc,direction){
        var unit;
        if(direction&&loc!=0) unit =(direction === "next")? "-=":"+=";
        slider.animate({
            "margin-left" : unit?unit+loc:loc
        })
    }

})(jQuery);