个人所写源代码，图片自己找
cwtxz
2015-05-11 01:50
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>carousel</title>
<link rel="stylesheet" href="css/carousel.css">
</head>
<body>
<div class="L_carousel wrap" data-setting='{
"width":1000,
"height":444,
"posterWidth":600,
"posterHeight":444,
"scale":0.8,
"speed":1500,
"delay":3000,
"autoPlay":true,
"opacity":1,
"verticalAlign":"middle"
}'>
<div class="poster-btn poster-btn-left"><a href="javascript:;"></a></div>
<ul>
<li><a href="javascript:;"><img src="img/1.jpg" alt="" width="100%"></a></li>
<li><a href="javascript:;"><img src="img/2.jpg" alt="" width="100%"></a></li>
<li><a href="javascript:;"><img src="img/3.jpg" alt="" width="100%"></a></li>
<li><a href="javascript:;"><img src="img/4.jpg" alt="" width="100%"></a></li>
<li><a href="javascript:;"><img src="img/5.jpg" alt="" width="100%"></a></li>
</ul>
<div class="poster-btn poster-btn-right"><a href="javascript:;"></a></div>
</div>
<script src="js/jquery.js"></script>
<script src="js/carousel.js"></script>
<script>
Carousel.init($('.L_carousel'));
</script>
</body>
</html>
css:
/*css reset*/
@charset "utf-8";
/* CSS Document */
html,body,
h1,h2,h3,h4,h5,h6,
p,dl,dt,dd,ul,ol{margin:0; padding:0;}
img{border:0 none;}
img { vertical-align:middle}
ul,ol{ list-style:none}
h1, h2, h3, h4, h5, h6 {font-weight:normal;}
html{ overflow-x:hidden;}
body,input{ line-height:1.5; font:normal 12px '\5FAE\8F6F\96C5\9ED1',Arial,'\5B8B\4F53',sans-serif;}
a { text-decoration:none; color:#333}
a:focus{outline:0;}
.clearfix:after { clear:both; display:block; height:0; visibility:hidden; overflow:hidden; content:'.'}
* html .clearfix { zoom:1}
*+html .clearfix { min-height:1px}
.tc{ text-align:center;}
.fl{ float:left;}
.fr{ float:right;}
.hide{display: none;}
table{border-collapse: collapse;border-spacing: 0;}
/*******************************************************************************************/
/***************************************carousel.css***************************************************/
.wrap{position: relative;margin:50px auto;}
.poster-main{position: relative;}
.poster-btn{cursor: pointer;position: absolute;top:0;}
.poster-btn a{position: absolute;width: 78px;height: 100px;top:50%;left:50%;margin-left:-39px;margin-top:-50px;transition:all 3s ease;-webkit-transition:all 3s ease;-moz-transition:all 3s ease;-o-transition:all 3s ease;-ms-transition:all 3s ease;}
.poster-btn:hover a{background-color:#333;opacity: 0.5;filter:alpha(opacity=50);}
.poster-btn-left{left:0;}
.poster-btn-left a{background: url('../img/icon.png') no-repeat 0 -64px;}
.poster-btn-right{right: 0;}
.poster-btn-right a{background: url('../img/icon.png') no-repeat -78px -64px;}
.poster-list{position: absolute;}
js:
;(function($){
var Carousel=function(poster){
var self=this;
this.poster=poster;
this.postItemsMain=this.poster.find(".poster-main");
this.postItems=this.poster.find(".poster-main .poster-list");
this.postItemsFirst=this.postItems.first();
this.postItemsLast=this.postItems.last();
this.posterBtn=this.poster.find(".poster-btn");
this.prevBtn=this.poster.find(".poster-btn-left");
this.nextBtn=this.poster.find(".poster-btn-right");
this.rotateFlag=true;
this.setting={
"width":840,//幻灯片宽度
"height":444,//幻灯片高度
"posterWidth":600,//第一帧宽度
"posterHeight":444,//第一帧高度
"scale":0.9,//缩放比例
"speed":500//播放速度
};
$.extend(this.setting,this.setJson());
this.setPostValue();
this.setPostPoS();
this.nextBtn.click(function(){
if(self.rotateFlag){
self.rotateFlag=false;
self.carouselRotate("left");
}
});
this.prevBtn.click(function(){
if(self.rotateFlag){
self.rotateFlag=false;
self.carouselRotate("right");
}
});
if(this.setting.autoPlay){
this.autoPlay();
}
this.postItems.hover(function(){
clearInterval(self.timer);
},function(){
self.autoPlay();
})
}
Carousel.prototype={
autoPlay:function(){
var $this=this;
this.timer=setInterval(function(){
$this.nextBtn.click();
},$this.setting.delay);
},
setJson:function(){
var setting=this.poster.attr('data-setting');
if(setting){
return $.parseJSON(setting);
}else{
return {};
}
},
setPostValue:function(){
var w=(this.setting.width-this.setting.posterWidth)/2;
this.poster.css({
'width':this.setting.width,
'height':this.setting.height
});
this.postItemsMain.css({
'width':this.setting.width,
'height':this.setting.height
});
this.posterBtn.css({
'width':w,
'height':this.setting.height,
'zIndex':Math.ceil(this.postItems.size()/2)
});
this.postItemsFirst.css({
'width':this.setting.posterWidth,
'height':this.setting.posterHeight,
'left':w,
'zIndex':Math.floor(this.postItems.size()/2),
'opacity':this.setting.opacity
});
},
setPostPoS:function(){
var sliceItems=this.postItems.slice(1),
rightSlice=sliceItems.slice(0,sliceItems.size()/2),
leftSlice=sliceItems.slice(sliceItems.size()/2),
rw=this.setting.posterWidth,
rh=this.setting.posterHeight,
level=Math.floor(this.postItems.size()/2),
gap=this.posterBtn.width()/level,
_this_=this;
rightSlice.each(function(i){
level--;
rw=rw*_this_.setting.scale;
rh=rh*_this_.setting.scale;
var j=i;
i++;
$(this).css({
'width':rw,
'height':rh,
'left':_this_.setting.width-_this_.posterBtn.width()+i*gap-rw,
'top':_this_.setVerticalAlign(rh),
'zIndex':level,
'opacity':1/(++j)
});
});
var lw=rw,lh=rh,oloop=Math.floor(this.postItems.size()/2);
leftSlice.each(function(i){
$(this).css({
'width':lw,
'height':lh,
'left':i*gap,
'top':_this_.setVerticalAlign(lh),
'zIndex':i,
'opacity':1/oloop
});
lw=lw/_this_.setting.scale;
lh=lh/_this_.setting.scale;
oloop--;
});
},
setVerticalAlign:function(h){
var top=0,verticalType=this.setting.verticalAlign;
if(verticalType==="top"){
top=0;
}else if(verticalType==="middle"){
top=(this.setting.height-h)/2;
}else if(verticalType==="bottom"){
top=this.setting.height-h;
}else{
top=(this.setting.height-h)/2;
}
return top;
},
carouselRotate:function(dir){
var $this=this,
zIndexArray=[];
if(dir==="left"){
this.postItems.each(function(){
var prev=$(this).prev().get(0)?$(this).prev():$this.postItemsLast,
width=prev.width(),
height=prev.height(),
left=prev.css('left'),
top=prev.css('top'),
zIndex=prev.css('zIndex'),
opacity=prev.css('opacity');
zIndexArray.push(zIndex);
$(this).animate({
'width':width,
'height':height,
'left':left,
'top':top,
'zIndex':zIndex,
'opacity':opacity
},$this.setting.speed,function(){
$this.rotateFlag=true;
});
});
this.postItems.each(function(i){
$(this).css('zIndex',zIndexArray[i]);
});
}else if(dir==="right"){
this.postItems.each(function(){
var next=$(this).next().get(0)?$(this).next():$this.postItemsFirst,
width=next.width(),
height=next.height(),
left=next.css('left'),
top=next.css('top'),
zIndex=next.css('zIndex'),
opacity=next.css('opacity');
zIndexArray.push(zIndex);
$(this).animate({
'width':width,
'height':height,
'left':left,
'top':top,
'zIndex':zIndex,
'opacity':opacity
},$this.setting.speed,function(){
$this.rotateFlag=true;
});
});
this.postItems.each(function(i){
$(this).css('zIndex',zIndexArray[i]);
});
}
}
}
Carousel.init=function(obj){
var _this=this;
obj.each(function(){
return new _this($(this));
});
}
window['Carousel']=Carousel;
})(jQuery);
4回答
-
- 一只帅蚂蚁
- 2015-05-11 08:57:15
灰常棒~~~
-
- 丶陌
- 2016-07-22 14:22:39
请问这个怎么弄成自适应
-
- cwtxz
- 2015-05-11 16:18:01
代码有点小问题，最后调用animate方法时应把对z-index属性的过渡去掉
-
- cwtxz
- 2015-05-11 13:43:40
没什么，大家共同进步
JS实现“旋转木马”幻灯片效果
66442 学习 · 147 问题
相似问题