注：来源于网络整理而成
使用
该jQuery旋转木马插件需要引入jQuery，carousel.js、carousel.css文件
HTML
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link type="text/css" rel="stylesheet" href="css/carousel.css">
<style type="text/css">
.caroursel {
margin: 150px auto;
}
</style>
</head>
<body>
<article class="htmleaf-container">
<div class="caroursel poster-main" data-setting='{
"width":1000,
"height":270,
"posterWidth":640,
"posterHeight":270,
"scale":0.8,
"dealy":"2000",
"algin":"middle"
}'>
<ul class="poster-list">
<li class="poster-item"><img src="image/1.jpg" width="100%" height="100%"></li>
<li class="poster-item"><img src="image/2.jpg" width="100%" height="100%"></li>
<li class="poster-item"><img src="image/3.jpg" width="100%" height="100%"></li>
<li class="poster-item"><img src="image/4.jpg" width="100%" height="100%"></li>
<li class="poster-item"><img src="image/5.jpg" width="100%" height="100%"></li>
<li class="poster-item"><img src="image/6.jpg" width="100%" height="100%"></li>
<li class="poster-item"><img src="image/1.jpg" width="100%" height="100%"></li>
</ul>
<div class="poster-btn poster-prev-btn"></div>
<div class="poster-btn poster-next-btn"></div>
</div>
</article>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/jquery.carousel.js"></script>
<script>
Caroursel.init($('.caroursel')) //初始化插件
</script>
</body>
</html>
该jQuery旋转木马插件使用一个<div>来作为包裹元素，在它里面是一个无序列表，用于放置图片，以及两个作为前后导航按钮的<div>元素
注：
1、导航按钮图片地址，在css文件中，更换图片需要修改
2、图片的数量需要为奇数张，否则显示会有一些异常，这是该插件的一个小bug
初始化插件
在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该旋转木马插件
Caroursel.init($('.caroursel'))
如果你需要自定义一些参数，可以在顶层
元素中设置data-setting属性。
<div class="caroursel rotator-main"
data-setting = '{
"width":1000, //旋转木马的宽度
"height":270, //旋转木马的高度
"posterWidth":640, //当前显示的图片的宽度
"posterHeight":270, //当前显示的图片的高度
"scale":0.8, //缩放值
"algin":"middle", //对齐方式
"speed":"1000", //动画速度
"isAutoplay":"true", //自动播放
"dealy":"1000" //延迟时间
}'>
carousel.css
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;
}
q:before,
q:after {
content: ;
}
abbr,
acronym {
border: 0;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix {
zoom: 1;
}
.poster-main {
position: relative;
width: 900px;
height: 270px
}
.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: 0px;
background: url("../image/btn_l.png") no-repeat center center;
background-color: red
}
.poster-main .poster-next-btn {
right: 0px;
background: url("../image/btn_r.png") no-repeat center center;
background-color: red
}
carousel.js
/**
* Created by Zhangyx on 2015/10/15.
*/
;(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 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),
"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),
"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)
281
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
