好看的皮囊千篇一律,有趣的灵魂万里挑一。
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);
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;}
标签: javascript