html，js,css轮播插件

来源：互联网发布：淘宝大学vip靠谱吗编辑：程序博客网时间：2024/05/29 15:12

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

//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的宽高时一定要考虑到图片的宽高，最好是宽高都是图片相同

1 0