对 jquery.carousel.js 进行修改
在已有的插件 jquery.carousel.js 根据自己的需求进行的修改。
在使用已有的jquery.carousel.js过程中，出现了一些问题，自己进行小小小的修改
如图样式：不自动轮播，当前页面显示蒙版遮罩，文字。
html
<div class="food-carousel">
<div class = "carourselThree poster-main" data-setting = '{
"width":1180,
"height":430,
"posterWidth":700,
"posterHeight":430,
"scale":0.8,
"isAutoplay":"false",
"dealy":"100",
"algin":"middle"
}'>
<ul class = "poster-list">
<li class = "poster-item"><img src="img/temp/index_16.jpg" width = "100%" height="100%">
<div class="div-text">
<h3>营养膳食1h3>
<p>Nutritional Dietp>
div>
li>
<li class = "poster-item"><img src="img/temp/index_16.jpg" width = "100%" height="100%">
<div class="div-text">
<h3>营养膳食2h3>
<p>Nutritional Dietp>
div>
li>
<li class = "poster-item"><img src="img/temp/index_16.jpg" width = "100%" height="100%">
<div class="div-text">
<h3>营养膳食3h3>
<p>Nutritional Dietp>
div>
li>
<li class = "poster-item"><img src="img/temp/index_16.jpg" width = "100%" height="100%">
<div class="div-text">
<h3>营养膳食4h3>
<p>Nutritional Dietp>
div>
li>
<li class = "poster-item"><img src="img/temp/index_16.jpg" width = "100%" height="100%">
<div class="div-text">
<h3>营养膳食5h3>
<p>Nutritional Dietp>
div>
li>
<li class = "poster-item"><img src="img/temp/index_16.jpg" width = "100%" height="100%">
<div class="div-text">
<h3>营养膳食6h3>
<p>Nutritional Dietp>
div>
li>
<li class = "poster-item"><img src="img/temp/index_16.jpg" width = "100%" height="100%">
<div class="div-text">
<h3>营养膳食7h3>
<p>Nutritional Dietp>
div>
li>
<li class = "poster-item"><img src="img/temp/index_16.jpg" width = "100%" height="100%">
<div class="div-text">
<h3>营养膳食8h3>
<p>Nutritional Dietp>
div>
li>
<li class = "poster-item"><img src="img/temp/index_16.jpg" width = "100%" height="100%">
<div class="div-text">
<h3>营养膳食9h3>
<p>Nutritional Dietp>
div>
li>
ul>
<div class = "poster-btn poster-prev-btn">
<i class="icon-arrow-left">i>
div>
<div class = "poster-btn poster-next-btn">
<i class="icon-arrow-right">i>
div>
div>
div>css
/*部分样式*/
/*转转木马 插件样式*/
.poster-main{
position: relative;
width: 900px;
height: 430px;
}
.poster-main a,.poster-main img{
display:block;
}
.poster-main .poster-list{
width: 900px;
height: 270px;
}
.poster-main .poster-list .poster-item{
position: absolute;
left: 0px;
top: 0px;
}
.poster-main .poster-btn{
position: absolute;
height: 100%;
width:100px;
top: 0px;
z-index: 10;
// opacity: 0.3;
}
.poster-main .poster-prev-btn{
left: 60px;
margin-left: 270px;
}
.poster-main .poster-next-btn{
right: 60px;
}
.poster-main{
.poster-next-btn,.poster-prev-btn{
font-size: 36px;
color: @white;
margin-top: 180px;
}
}js
//自定义部分代码
var len = $('.food-carousel .poster-item').length-1;
$('.poster-prev-btn i').click(function(){
$('.food-carousel .poster-item').each(function(index){
var _left = $(this).css('left');
var _leftNumber = _left.substr(0,3);
if(_leftNumber == 240){
$('.food-carousel .poster-item').children('.div-text').hide();
if($(this).index() == 0){
$('.food-carousel .poster-item:eq('+ len +')').children('.div-text').show();
}else{
$(this).prev().children('.div-text').show();
}
}else{
$(this).prev().children('.div-text').hide();
}
});
});
$('.poster-next-btn i').click(function(){
$('.food-carousel .poster-item').each(function(){
var _left = $(this).css('left');
var _leftNumber = _left.substr(0,3);
if(_leftNumber == 240){
$('.food-carousel .poster-item').children('.div-text').hide();
if($(this).index() == len){
$('.food-carousel .poster-item:eq(0)').children('.div-text').show();
}else{
$(this).next().children('.div-text').show();
}
}else{
$(this).next().children('.div-text').hide();
}
});
});
//初始化
Caroursel.init($('.carourselThree'));
//修改过的已有代码
/**
*Created by Zhangyx on 2015/10/15.
* Modified by pxt on 2016/06/29.
*/
;(function($){
var Caroursel = function (caroursel){
var self = this;
this.caroursel = caroursel;
this.posterList = caroursel.find(".poster-list");
this.posterItems = caroursel.find(".poster-item");
this.firstPosterItem = this.posterItems.first();
this.lastPosterItem = this.posterItems.last();
this.prevBtn = this.caroursel.find(".poster-prev-btn");
this.nextBtn = this.caroursel.find(".poster-next-btn");
//默认参数
this.setting = {
"width":"1000",
"height":"270",
"posterWidth":"640",
"posterHeight":"270",
"scale":"0.8",
"speed":"1000",
"isAutoplay":"true",
"dealy":"1000"
}
//自定义参数与默认参数合并
$.extend(this.setting,this.getSetting())
//设置第一帧位置
this.setFirstPosition();
//设置剩余帧的位置
this.setSlicePosition();
//旋转
this.rotateFlag = true;
this.prevBtn.bind("click",function(){
if(self.rotateFlag){
self.rotateFlag = false;
self.rotateAnimate("left")
}
});
this.nextBtn.bind("click",function(){
if(self.rotateFlag){
self.rotateFlag = false;
self.rotateAnimate("right")
}
});
if(this.setting.isAutoplay){
// this.autoPlay();
// this.caroursel.hover(function(){clearInterval(self.timer)},function(){self.autoPlay()})
}
};
Caroursel.prototype = {
// autoPlay:function(){
// var that = this;
// this.timer = window.setInterval(function(){
// that.prevBtn.click();
// },that.setting.dealy)
// },
rotateAnimate:function(type){
var that = this;
var zIndexArr = [];
if(type == "left"){//向左移动
this.posterItems.each(function(){
var self = $(this),
prev = $(this).next().get(0)?$(this).next():that.firstPosterItem,
width = prev.css("width"),
height = prev.css("height"),
zIndex = prev.css("zIndex"),
opacity = prev.css("opacity"),
left = prev.css("left"),
top = prev.css("top");
zIndexArr.push(zIndex);
self.animate({
"width":width,
"height":height,
"left":left,
"opacity":opacity,
"top":top,
},that.setting.speed,function(){
that.rotateFlag = true;
});
});
this.posterItems.each(function(i){
$(this).css("zIndex",zIndexArr[i]);
});
}
if(type == "right"){//向右移动
this.posterItems.each(function(){
var self = $(this),
next = $(this).prev().get(0)?$(this).prev():that.lastPosterItem,
width = next.css("width"),
height = next.css("height"),
zIndex = next.css("zIndex"),
opacity = next.css("opacity"),
left = next.css("left"),
top = next.css("top");
zIndexArr.push(zIndex);
self.animate({
"width":width,
"height":height,
"left":left,
"opacity":opacity,
"top":top,
},that.setting.speed,function(){
that.rotateFlag = true;
});
});
this.posterItems.each(function(i){
$(this).css("zIndex",zIndexArr[i]);
});
}
},
setFirstPosition:function(){
this.caroursel.css({"width":this.setting.width,"height":this.setting.height});
this.posterList.css({"width":this.setting.width,"height":this.setting.height});
var width = (this.setting.width - this.setting.posterWidth) / 2;
//设置两个按钮的样式
this.prevBtn.css({"width":width , "height":this.setting.height,"zIndex":Math.ceil(this.posterItems.size()/2)});
this.nextBtn.css({"width":width , "height":this.setting.height,"zIndex":Math.ceil(this.posterItems.size()/2)});
this.firstPosterItem.css({
"width":this.setting.posterWidth,
"height":this.setting.posterHeight,
"left":width,
"zIndex":Math.ceil(this.posterItems.size()/2),
"top":this.setVertialType(this.setting.posterHeight)
});
},
setSlicePosition:function(){
var _self = this;
var sliceItems = this.posterItems.slice(1),
level = Math.floor(this.posterItems.length/2),
leftItems = sliceItems.slice(0,level),
rightItems = sliceItems.slice(level),
posterWidth = this.setting.posterWidth,
posterHeight = this.setting.posterHeight,
Btnwidth = (this.setting.width - this.setting.posterWidth) / 2,
gap = Btnwidth/level,
containerWidth = this.setting.width;
//设置左边帧的位置
// var i = 1;
var i = level;
var leftWidth = posterWidth;
var leftHeight = posterHeight;
var zLoop1 = level;
leftItems.each(function(index,item){
leftWidth = posterWidth * _self.setting.scale;
leftHeight = posterHeight*_self.setting.scale;
$(this).css({
"width":leftWidth,
"height":leftHeight,
"left": Btnwidth - i*gap,
"zIndex":zLoop1--,
// "opacity":1/(i+1),
"opacity":1,
"top":_self.setVertialType(leftHeight)
});
// i++;
});
//设置右面帧的位置
var j = level;
var zLoop2 = 1;
var rightWidth = posterWidth;
var rightHeight = posterHeight;
rightItems.each(function(index,item){
var rightWidth = posterWidth * _self.setting.scale;
var rightHeight = posterHeight*_self.setting.scale;
$(this).css({
"width":rightWidth,
"height":rightHeight,
"left": containerWidth -( Btnwidth - j*gap + rightWidth),
"zIndex":zLoop2++,
// "opacity":1/(j+1),
"opacity":1,
"top":_self.setVertialType(rightHeight)
});
// j--;
});
},
getSetting:function(){
var settting = this.caroursel.attr("data-setting");
if(settting.length > 0){
return $.parseJSON(settting);
}else{
return {};
}
},
setVertialType:function(height){
var algin = this.setting.algin;
if(algin == "top") {
return 0
}else if(algin == "middle"){
return (this.setting.posterHeight - height) / 2
}else if(algin == "bottom"){
return this.setting.posterHeight - height
}else {
return (this.setting.posterHeight - height) / 2
}
}
}
Caroursel.init = function (caroursels){
caroursels.each(function(index,item){
new Caroursel($(this));
}) ;
};
window["Caroursel"] = Caroursel;
})(jQuery)