html，js,css轮播插件

2016-9-9

今天帮一人写了个简单的轮播，工作不紧张，就顺便传上来分享给大家吧。源码，带部分注释。。。

//html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/carousel.css">
    <script src="js/jquery.js"></script>

</head>
<body>
<div  class="carouselBody" data-setting='{
                            "imgWidth":640,
                            "imgHeight":270,
                            "animateTime":2000,
                            "autoPlay":true,
                            "delayTime":5000
                            }'>
    <ul class="carousel">
        <li class="carouselLi"><a><img src="img/1.jpg"></a></li>
        <li class="carouselLi"><a><img src="img/2.jpg"></a></li>
        <li class="carouselLi"><a><img src="img/3.jpg"></a></li>
        <li class="carouselLi"><a><img src="img/4.jpg"></a></li>
        <li class="carouselLi"><a><img src="img/5.jpg"></a></li>
        <li class="carouselLi"><a><img src="img/6.jpg"></a></li>
    </ul>
    <div class="carousel-btn poster-prev-btn"></div>
   <div class="carousel-btn poster-next-btn"></div>
</div>
<script src="js/carousel.js"></script>
<script>
    $(function(){
        Carousel.init($(".carouselBody"));
    });


</script>
</body>
</html>

//js

;(function($){
    var Carousel = function(poster){
        this.poster=poster;
        _this_ = this;
        this.carouselUl = poster.find(".carousel");
        this.carouselBtn = poster.find(".carousel-btn");
        this.carouselPrevBtn = poster.find(".poster-prev-btn");
        this.carouselNextBtn = poster.find(".poster-next-btn");
        this.carouselLi = poster.find(".carouselLi");
        this.rotateFlag = true;
        this.setting={
            "imgWidth":640,
            "imgHeight":270,
            "animateTime":2000,
            "autoPlay":false
        }
        $.extend(this.setting,this.getSetting());
        this.carouselLi.each(function(i){                     //初始化图片位置
            var newLeft = _this_.setting.imgWidth*(i-2);
            $(this).css({
                left:newLeft
            });

        });

        this.setValue();
        this.bindClick();
        if(this.setting.autoPlay){
            this.autoPlay();
            this.poster.hover(function(){
                window.clearInterval(_this_.timer);
            },function(){
                _this_.autoPlay();
            })
        }
    }

    Carousel.prototype={
        autoPlay:function(){
            var self = this;
            this.timer=window.setInterval(function(){
                self.carouselNextBtn.click();
            },this.setting.delayTime);
        },
        setValue:function(){
            this.poster.css({
                width:this.setting.imgWidth,
                height:this.setting.imgHeight
            });
            this.carouselUl.css({
                width:this.setting.imgWidth,
                height:this.setting.imgHeight
            });
            this.carouselBtn.css({
                width:this.setting.imgWidth*0.15,
                height:this.setting.imgHeight
            })
        },
        getSetting:function(){
            var setting = this.poster.attr("data-setting");
            if(setting&&setting!=''){
                //    console.log(setting);
                return $.parseJSON(setting);

            }else{
                return {};
            }
            return setting;
        },
        bindClick:function(){
            var _this = this;
            var match =/(.*)px/;
            var maxLeft = _this.setting.imgWidth*(_this.carouselLi.size()-1);

            $(this.carouselPrevBtn).click(function(){
                if(_this.rotateFlag==true){
                    _this.rotateFlag=false;

                    _this.carouselLi.each(function(i){

                        var oldLeft = $(this).css("left");
                        oldLeft= match.exec(oldLeft)[1];             //正则
                        var newLeft = oldLeft-(-_this.setting.imgWidth);

                        if(newLeft>=maxLeft){
                            $(this).css("left",-_this.setting.imgWidth+"px");
                        }else{
                            $(this).animate({
                                left:newLeft
                            },_this.setting.animateTime,function(){       //function防止快速换页
                                _this.rotateFlag = true
                            });
                        }


                    });
                }

            });
            $(this.carouselNextBtn).click(function(){
                if(_this.rotateFlag==true){
                    _this.rotateFlag=false;

                    _this.carouselLi.each(function(i){

                        var oldLeft = $(this).css("left");
                        oldLeft= match.exec(oldLeft)[1];             //正则
                        var newLeft = oldLeft-_this.setting.imgWidth;

                        if(newLeft<=-maxLeft){
                            $(this).css("left",_this.setting.imgWidth+"px");
                        }else{
                            $(this).animate({
                                left:newLeft
                            },_this.setting.animateTime,function(){       //function防止快速换页
                                _this.rotateFlag = true
                            });
                        }


                    });
                }

            });


        }
    }
    Carousel.init=function(posters){
        var _this_ = this;
        posters.each(function(){
            new _this_($(this));
        });
    }
    window["Carousel"]=Carousel;
})(jQuery);

//css

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
abbr,acronym{border:0;}
body{color:#666; background-color:#fff;font: 12px/1.5 '微软雅黑',tahoma,arial,'Hiragino Sans GB',宋体,sans-serif;}
.clearfix:after {visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.clearfix {zoom:1;}
/*carousel*/
.carouselBody{position:relative;display:inline-block;margin-left: 20%;overflow: hidden}
.carouselLi a{display: block}
.carouselLi{position: absolute;left:0;top:0;}
.carousel-btn{position:absolute;top:0px;background:black;opacity:0.8}
.poster-prev-btn{left: 0;background: url("../img/btn_l.png") no-repeat center center;}
.poster-next-btn{right:0;background: url("../img/btn_r.png") no-repeat center center;}

注意事项，设置carouselBody的宽高时一定要考虑到图片的宽高，最好是宽高都是图片相同

标签: javascript