jQuery仿3D旋转木马效果插件(带索引按钮)
项目中需要用到旋转木马效果，但是我在网上找的插件，基本都是不带按钮或者只是带前后按钮的，而项目要求的是带索引按钮，也就是说有3张图片轮播，对应的要有3个小按钮，点击按钮，对应的图片位于中间位置。于是就在jQuery的一款插件jquery.carousel.js的基础上进行了一些改进，不足的是，固定就是3张图片。
代码：
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>jQuery自动轮播旋转木马插件</title>
<link type="text/css" rel="stylesheet" href="css/carousel.css">
<style type="text/css">
.caroursel{margin:150px auto;}
/*body{background-color: #2A2A2A;}*/
</style>
<!--[if IE]>
<script src="http://libs.baidu.com/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<article class="jq22-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="data:image/a1.png" width = "100%" height="100%"></li>
<li class = "poster-item"><img src="data:image/a2.png" width = "100%" height="100%"></li>
<li class = "poster-item"><img src="data:image/a3.png" width = "100%" height="100%"></li>
</ul> <div class = "poster-btn poster-first-btn"></div>
<div class = "poster-btn poster-second-btn"></div>
<div class = "poster-btn poster-third-btn"></div> <div class = "poster-btn poster-prev-btn"> < </div>
<div class = "poster-btn poster-next-btn"> > </div> </div> </article> <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.carousel-1.js"></script>
<script>
Caroursel.init($('.caroursel'))
</script>
</body>
</html>
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:;padding:;}
table{border-collapse:collapse;border-spacing:;}
fieldset,img{border:;}
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:;}
body{color:#666; background-color:#fff;}
.clearfix:after {visibility:hidden;display:block;font-size:;content:" ";clear:both;height:;}
.clearfix {zoom:;}
.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{
cursor: pointer;
position: absolute;
top:290px;
width:14px !important;
height:14px !important;
text-align: center;
line-height: 14px;
color: #ffffff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #808080;
z-index:;
}
.poster-main .poster-prev-btn{
left: 40%;
}
.poster-main .poster-next-btn{
left: 56%;
}
.poster-main .poster-first-btn{
left: 45%;
}
.poster-main .poster-second-btn{
left: 48%;
}
.poster-main .poster-third-btn{
left: 51%;
}
.poster-main .poster-btn-active{
background-color: #000000;
}
JS：
;(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.firstBtn = this.caroursel.find(".poster-first-btn");
this.secondBtn = this.caroursel.find(".poster-second-btn");
this.thirdBtn = this.caroursel.find(".poster-third-btn");
this.buttonItems = [this.firstBtn,this.secondBtn,this.thirdBtn];
//每个移动元素的位置索引,用于记录每个元素当前的位置,在每次移动的时候,该数组的值都会发生变化
//值为1 表示在中间 2:在zuo边 3:在you边
//数组的下标对应li元素的位置索引
this.curPositions = [1,2,3];
this.setting = {
"width":"900",
"height":"300",
"posterWidth":"300",
"posterHeight":"200",
"scale":"0.8",
"speed":"1000",
"isAutoplay":"true",
"dealy":"1000"
};
$.extend(this.setting,this.getSetting());
this.setFirstPosition();
this.setSlicePosition();
this.refreshCss();
this.rotateFlag = true;
this.prevBtn.bind("click",function(){
if(self.rotateFlag){
self.rotateFlag = false;
self.rotateAnimate("left")
}
});
//绑定位置按钮事件
this.firstBtn.bind("click",function(){
console.log(this);
self.clickPosButtonIndex(0);
});
this.secondBtn.bind("click",function(){
self.clickPosButtonIndex(1);
});
this.thirdBtn.bind("click",function(){
self.clickPosButtonIndex(2);
});
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.nextBtn.click();
},that.setting.dealy)
},
refreshCss:function(){
var curFirstPos;//当前位于中间的li元素位置
for( i = 0; i < this.buttonItems.length; ++i)
{
var curButton = this.buttonItems[i];
var curPos = this.curPositions[i];
if(curPos == 1){
curButton.addClass('poster-btn-active');
}
else
{
curButton.removeClass('poster-btn-active');
}
}
console.log('after refresh claass');
},
//记录每次移动的状态
refreshPositions:function(offset){
console.log('before refreshPositions',this.curPositions);
for( i = 0; i < this.curPositions.length; ++i)
{
var nextPos = this.curPositions[i] + offset;
if (nextPos > this.curPositions.length) {//移动超过末尾,则位置变成到开头
nextPos = 1;
}else
if (nextPos < 1) {////向左边移动已经移动到开始位置更左边,则位置变成结束
nextPos = this.curPositions.length;
}
this.curPositions[i] = nextPos;
}
console.log('after refreshPositions',this.curPositions);
this.refreshCss();
},
//点击位置按钮,根据点击的按钮索引 决定向左还是向右移动[因为只有三个位置,该方法能够仅靠向左或向右就能将
//指定的位置移动到中间]
clickPosButtonIndex:function(index){
console.log('click the index ' + index);
var self = this;
if(self.rotateFlag == false) {//目前正在移动等移动结束后才能进入
return;
}
var curPos = this.curPositions[index];
console.log('cur pos' + curPos);
var moveDirection = null;
if(curPos == 2){//目标位置现在 在zuo边,要移动到中间 只需要向左边移动一次
moveDirection = "right";
}else
if(curPos == 3){//目标位置现在在you边,向右边移动一次
moveDirection = "left";
}
if(moveDirection != null){
console.log('move to ' + moveDirection);
self.rotateFlag = false;
self.rotateAnimate(moveDirection)
}
},
rotateAnimate:function(type){
var that = this;
var zIndexArr = [];
if(type == "left"){//将posterItems的每个元素移动到下一个元素所在的位置
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]);
});
this.refreshPositions(1);
}
if(type == "right"){////将posterItems的每个元素移动到下上一个元素所在的位置
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]);
});
this.refreshPositions(-1);
}
},
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);
效果图：
jQuery仿3D旋转木马效果插件(带索引按钮)的更多相关文章
- jQuery模仿人类打字效果插件typetype
typetype是一款模仿人类打字效果的jQuery插件,typetype非常轻巧,文件不到2K,gzipped压缩后只有578字节,但模仿的效果非常逼真,一字一字的顿出和回删效果,让人惊叹不止,喜欢 ...
- 推荐20款基于 jQuery & CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
- 基于jQuery图像碎片切换效果插件FragmentFly
基于jQuery图像碎片切换效果插件FragmentFly.这是一款只需三步轻松完成碎片动画,参数可调,使用方便. 在线预览 源码下载 部分代码: <div class="all_ ...
- jquery 仿windows10菜单效果下载
http://www.kuitao8.com/20150923/4079.shtml jquery 仿windows10菜单效果下载
- HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相册
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...
- HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相冊
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...
- 讲一个使用jquery-slick旋转木马效果插件案例
效果展示连接 http://www.jqcool.net/demo/201405/jquery-slick/ 今天刚接触这个插件,被这插件搞的大脑风暴了 所以来记录一下使用方法 首先注意一点 不特别标 ...
- CSS3 实现3D旋转木马效果
基本原理: 1.首先我们需要让图片能旋转的效果,我们让所有图片绝对定位(position:absolute),共用一个中心点. 2.对于舞台我们加一个视距,比如下面的demo是 perspective ...
- 【原创】jQuery 仿百度输入标签插件
1.先上效果图 2.调用方式 <link href="/Styles/tagsinput.css" rel="stylesheet" type=" ...
随机推荐
- java基础必备单词讲解 day three
if 如果 else 否则 switch 切换判断 case 实例 break 退出 return 返回 default 默认 variable array 数组 null 空的 无效的 pointe ...
- 顺序语句：GOTO和NULL语句
一 标号和GOTO 1 语法: PL/SQL中GOTO语句是无条件跳转到指定的标号去的意思.语法如下: GOTO label;......<<label>> /*标号是用< ...
- scoped,会使设置UI组件库的样式识别不出来
未设置 scoped 作用域:显示效果 设置作用域的效果:ui组件默认的值(你怎么设置都不管用)
- 【经典问题】bzoj2957: 楼房重建
经典问题:动态维护上升子序列长度 进阶问题:[经典问题]#176. 栈 Description 小A的楼房外有一大片施工工地,工地上有N栋待建的楼房.每天,这片工地上的房子拆了又建.建了又拆.他经常无 ...
- 并排打印多个图案（C++实现）
在练习循环控制语句时,经常会遇到一类问题:使用循环控制打印星号(*)来形成各种各样的图案,并强调所有的星号(*)都要用单条的输出语句cout<<"*";来打印. 例如打 ...
- JDK学习---深入理解java中的HashMap、HashSet底层实现
本文参考资料: 1.<大话数据结构> 2.http://www.cnblogs.com/dassmeta/p/5338955.html 3.http://www.cnblogs.com/d ...
- MySQL的备份
MySQL的备份 开启MySQL的log_bin 执行查看mysql的log_bin状态 > show variables like 'log_bin%'; +----------------- ...
- keil调试问题记录
1.错误类型:L6218E:Underfined symbol &&&&&&&&& (referred form &&a ...
- 翻译 | “扩展asm”——用C表示操作数的汇编程序指令
本文翻译自GNU关于GCC7.2.0版本的官方说明文档,第6.45.2小节.供查阅讨论,如有不当处敬请指正…… 通过扩展asm,可以让你在汇编程序中使用C中的变量,并从汇编代码跳转到C语言标号.在汇编 ...
- java线程安全总结 - 1 （转载）
原文地址:http://www.jameswxx.com/java/java%E7%BA%BF%E7%A8%8B%E5%AE%89%E5%85%A8%E6%80%BB%E7%BB%93/ 最近想将ja ...