碧海长天
好看的皮囊千篇一律，有趣的灵魂万里挑一。
好看的皮囊千篇一律，有趣的灵魂万里挑一。
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
碧海长天