博主在浏览网页时无意间发现了一种banner图的轮播方式——像旋转木马一样的轮播方式，博主感觉非常新颖独特，经过查阅资料，观看某课网教程总算搞了出来的，其原理主要利用了JQuery代码实现，好了不多说，看楼下代码及演示效果吧
首先是HTML及CSS代码
HTML
<div class="pictureSlider poster-main" data-setting=‘{"width":1000,"height":270,"posterWidth":640,"posterHeight":270,"scale":0.8,"autoPlay":true,"delay":2000,"speed":300}‘>
<div class="poster-btn poster-prev-btn"></div>
<ul class="poster-list">
<li class="poster-item"><a href="http://www.16sucai.com"><img src="images/01.jpg" width="100%" height="100%"></a></li>
<li class="poster-item"><a href="#"><img src="images/02.jpg" width="100%" height="100%"></a></li>
<li class="poster-item"><a href="#"><img src="images/03.jpg" width="100%" height="100%"></a></li>
<li class="poster-item"><a href="#"><img src="images/04.jpg" width="100%" height="100%"></a></li>
<li class="poster-item"><a href="#"><img src="images/05.jpg" width="100%" height="100%"></a></li>
<li class="poster-item"><a href="#"><img src="images/06.jpg" width="100%" height="100%"></a></li>
<li class="poster-item"><a href="#"><img src="images/07.jpg" width="100%" height="100%"></a></li>
<li class="poster-item"><a href="#"><img src="images/08.jpg" width="100%" height="100%"></a></li>
<li class="poster-item"><a href="#"><img src="images/09.jpg" width="100%" height="100%"></a></li>
</ul>
<div class="poster-btn poster-next-btn"></div>
</div>
CSS代码
*{margin:0;padding:0;list-style: none;border:0;}
.container { margin:150px auto; max-width:1000px;}
.poster-main{ position:relative;width:800px;height:270px;}
.poster-main a,.poster-main img{display:block;}
.poster-main .poster-list{width:800px;height:270px;}
.poster-main .poster-list .poster-item{ position:absolute;left:0;top:0;}
.poster-main .poster-btn{ position:absolute;top:0;width:100px;height:270px; z-index:10; cursor:pointer; opacity:0.8}
.poster-main .poster-prev-btn{left:0; background: url(../images/btn_l.png) no-repeat center center;}
.poster-main .poster-next-btn{right:0; background: url(../images/btn_r.png) no-repeat center center;}
然后是JS代码
;(function($){
var Carousel = function(poster){
var self = this;
//保存单个旋转木马对象
this.poster = poster;
this.posterItemMain = poster.find("ul.poster-list");
this.nextBtn = poster.find("div.poster-next-btn");
this.prevBtn = poster.find("div.poster-prev-btn");
this.posterItems = poster.find("li.poster-item");
if( this.posterItems.size()%2 == 0 ){
this.posterItemMain.append( this.posterItems.eq(0).clone() );
this.posterItems = this.posterItemMain.children();
};
this.posterFirstItem = this.posterItems.first();
this.posterLastItem = this.posterItems.last();
this.rotateFlag = true;
//默认配置参数
this.setting = {
"width" : 1000, //幻灯片的宽度
"height" : 270, //幻灯片的高度
"posterWidth" : 640, //幻灯片第一帧的宽度
"posterHeight" : 270, //幻灯片第一帧的高度
"scale" : 0.9, //记录显示比例关系
"speed" : 500,
"autoPlay" : false,
"delay" : 5000,
"verticalAlign" : "middle" //top bottom
};
$.extend( this.setting,this.getSetting() );
//设置配置参数值
this.setSettingValue();
//初始化幻灯片位置
this.setPosterPos();
//左旋转按钮
this.nextBtn.click(function(){
if(self.rotateFlag){
self.rotateFlag = false;
self.carouseRotate("left");
};
});
//右旋转按钮
this.prevBtn.click(function(){
if(self.rotateFlag){
self.rotateFlag = false;
self.carouseRotate("right");
};
});
//是否开启自动播放
if(this.setting.autoPlay){
this.autoPlay();
this.poster.hover( function(){
//self.timer是setInterval的种子
window.clearInterval(self.timer);
}, function(){
self.autoPlay();
});
};
};
Carousel.prototype = {
autoPlay:function(){
var self = this;
this.timer = window.setInterval( function(){
self.nextBtn.click();
}, this.setting.delay );
},
//旋转
carouseRotate:function(dir){
var _this_ = this;
var zIndexArr = [];
//左旋转
if(dir === "left"){
this.posterItems.each(function(){
var self = $(this),
prev = self.prev().get(0)?self.prev():_this_.posterLastItem,
width = prev.width(),
height =prev.height(),
opacity = prev.css("opacity"),
left = prev.css("left"),
top = prev.css("top"),
zIndex = prev.css("zIndex");
zIndexArr.push(zIndex);
self.animate({
width :width,
height :height,
//zIndex :zIndex,
opacity :opacity,
left :left,
top :top
},_this_.setting.speed,function(){
_this_.rotateFlag = true;
});
});
//zIndex需要单独保存再设置，防止循环时候设置再取的时候值永远是最后一个的zindex
this.posterItems.each(function(i){
$(this).css("zIndex",zIndexArr[i]);
});
}else if(dir === "right"){//右旋转
this.posterItems .each(function(){
var self = $(this),
next = self.next().get(0)?self.next():_this_.posterFirstItem,
width = next.width(),
height =next.height(),
opacity = next.css("opacity"),
left = next.css("left"),
top = next.css("top"),
zIndex = next.css("zIndex");
zIndexArr.push(zIndex);
self.animate({
width :width,
height :height,
//zIndex :zIndex,
opacity :opacity,
left :left,
top :top
},_this_.setting.speed,function(){
_this_.rotateFlag = true;
});
});
//zIndex需要单独保存再设置，防止循环时候设置再取的时候值永远是最后一个的zindex
this.posterItems.each(function(i){
$(this).css("zIndex",zIndexArr[i]);
});
};
},
//设置剩余的帧的位置关系
setPosterPos:function(){
var self = this,
sliceItems = this.posterItems.slice(1),
sliceSize = sliceItems.size()/2,
rightSlice = sliceItems.slice(0,sliceSize),
//存在图片奇偶数问题
level = Math.floor(this.posterItems.size()/2),
leftSlice = sliceItems.slice(sliceSize);
//设置右边帧的位置关系和宽度高度top
var firstLeft = (this.setting.width - this.setting.posterWidth)/2;
var rw = this.setting.posterWidth,
fixOffsetLeft = firstLeft + rw,
rh = this.setting.posterHeight,
gap = ((this.setting.width - this.setting.posterWidth)/2)/level;
//设置右边位置关系
rightSlice.each(function(i){
level--;
rw = rw * self.setting.scale;
rh = rh * self.setting.scale;
var j = i;
$(this).css({
zIndex :level,
width :rw,
height :rh,
opacity :1/(++j),
left :fixOffsetLeft+(++i)*gap - rw,
top :self.setVerticalAlign(rh)
});
});
//设置左边的位置关系
var lw = rightSlice.last().width(),
lh =rightSlice.last().height(),
oloop = Math.floor(this.posterItems.size()/2);
leftSlice.each(function(i){
$(this).css({
zIndex:i,
width:lw,
height:lh,
opacity:1/oloop,
left:i*gap,
top:self.setVerticalAlign(lh)
});
lw = lw/self.setting.scale;
lh = lh/self.setting.scale;
oloop--;
});
},
//设置垂直排列对齐
setVerticalAlign:function(height){
var verticalType = this.setting.verticalAlign,
top = 0;
if(verticalType === "middle"){
top = (this.setting.height-height)/2;
}else if(verticalType === "top"){
top = 0;
}else if(verticalType === "bottom"){
top = this.setting.height-height;
}else{
top = (this.setting.height-height)/2;
};
return top;
},
//设置配置参数值去控制基本的宽度高度
setSettingValue:function(){
this.poster.css({
width:this.setting.width,
height:this.setting.height
});
this.posterItemMain.css({
width:this.setting.width,
height:this.setting.height
});
//计算上下切换按钮的宽度
var w = (this.setting.width-this.setting.posterWidth)/2;
//设置切换按钮的宽高，层级关系
this.nextBtn.css({
width:w,
height:this.setting.height,
zIndex:Math.ceil(this.posterItems.size()/2)
});
this.prevBtn.css({
width:w,
height:this.setting.height,
zIndex:Math.ceil(this.posterItems.size()/2)
});
this.posterFirstItem.css({
width:this.setting.posterWidth,
height:this.setting.posterHeight,
left:w,
top:0,
zIndex:Math.floor(this.posterItems.size()/2)
});
},
//获取人工配置参数
getSetting:function(){
var setting = this.poster.attr("data-setting");
if(setting && setting != ""){
return $.parseJSON(setting);
}else{
return {};
};
}
};
Carousel.init = function(posters){
var _this_ = this;
posters.each(function(){
// console.log("halo Louis;")
new _this_($(this));
});
};
//挂载到window下
window.Carousel = Carousel;
})(jQuery);
运行可知其效果如下
时间： 2024-10-08 10:08:41