用jQuery实现旋转木马效果(带前后按钮和索引按钮)
项目中要用到旋转木马效果，一共5张图片轮播，并且点击对应的索引按钮能切换到对应的图片。本效果实在jquery.carousel.js插件的基础上做了一些改进，以实现上述需求。
效果图如下：
代码：
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;}
</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>
<li class = "poster-item"><img src="data:image/a4.png" width = "100%" height="100%"></li>
<li class = "poster-item"><img src="data:image/a5.png" width = "100%" height="100%"></li>
</ul> <ul class="btn-box">
<li class="index-btn"></li>
<li class="index-btn"></li>
<li class="index-btn"></li>
<li class="index-btn"></li>
<li class="index-btn"></li>
</ul>
<div class = "poster-btn poster-prev-btn"> < </div>
<div class = "poster-btn poster-next-btn"> > </div> </div> </article> <script src="js/jquery-1.11.3.mins.js"></script>
<script src="js/jquery.carousel.js"></script>
<script>
Caroursel.init($('.caroursel'))
</script>
</body>
</html>
CSS：
/*公共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: #feb320;
z-index:;
}
.btn-box{
position: absolute;
top: 290px;
left: 50%;
margin-left: -60px;
width: 120px;
height: 20px;
}
.index-btn{
cursor: pointer;
float: left;
width: 14px;
height: 14px;
color: #ffffff;
margin: 0 5px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #feb320;
z-index:;
}
.poster-main .poster-prev-btn{
left: 20%;
}
.poster-main .poster-next-btn{
left: 80%;
}
.index-btn.poster-btn-active{
background-color: #fe7d0f;
}
jquery.carousel.js：
/**
* 改进版
*/ var MIDDLE_PIC_POS = 1 //计算如何用最短的距离移动到目标
//由于有两种移动方式,向左边移动或者像右边移动,只需要在这两种方式中选择一个小的就行了 ;(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.buttonItems = caroursel.find(".index-btn"); //每个移动元素的位置索引,用于记录每个元素当前的位置,在每次移动的时候,该数组的值都会发生变化
//数组的下标对应li元素的位置索引
this.curPositions = [];
for(var i = 0;i<this.posterItems.length;++i){
this.curPositions[i] = i+1;
} 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.nextBtn.bind("click",function(){
if(self.rotateFlag){
self.rotateFlag = false;
self.rotateAnimate("right")
}
}); //绑定位置按钮事件 this.buttonItems.each(function(index){
var _this = $(this);
_this.click(function(){
self.clickPosButtonIndex(index);
})
}); 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 that= this;
var curFirstPos;//当前位于中间的li元素位置
this.buttonItems.each(function(index){
var _this = $(this);
var curPos = that.curPositions[index];
if(curPos == 1){
_this.addClass('poster-btn-active');
}
else{
_this.removeClass('poster-btn-active');
}
});
}, //记录每次移动的状态
refreshPositions:function(offset){
//console.log('before refreshPositions',this.curPositions,'the offset is offset ' + offset);
for(var i = 0; i < this.curPositions.length; ++i)
{
var nextPos = this.curPositions[i] + offset;
if (nextPos > this.curPositions.length) {//移动超过末尾,则位置变成到开头
nextPos = nextPos - this.curPositions.length;
}else
if (nextPos < 1) {////向左边移动已经移动到开始位置更左边,则位置变成结束
nextPos = this.curPositions.length + nextPos;
}
this.curPositions[i] = nextPos;
}
//console.log('after refreshPositions',this.curPositions);
this.refreshCss();
}, cal_move_path:function(curPos,desPos,arraySize) {
//console.log("begin cal_move_path ",curPos,desPos,arraySize);
if(curPos == desPos) return null;
//往左边移动
var goRightSteps;
var goLeftSteps;
var retDirect;
var retStep;
if(curPos > desPos){
goRightSteps = curPos - desPos;
goLeftSteps = desPos + (arraySize - curPos);
retDirect = (goRightSteps <= goLeftSteps) ? "right":"left";
return {"direct":retDirect,"step":Math.min(goLeftSteps,goRightSteps)};
}
}, //点击位置按钮,根据点击的按钮索引 决定向左还是向右移动[因为只有三个位置,该方法能够仅靠向左或向右就能将
//指定的位置移动到中间]
clickPosButtonIndex:function(index){
//console.log('click the index ' + index,'the curPositions is ',this.curPositions);
var self = this;
if(self.rotateFlag == false) {//目前正在移动等移动结束后才能进入
return;
} var curPos = this.curPositions[index];
var retPath = this.cal_move_path(curPos,MIDDLE_PIC_POS,this.curPositions.length);
if (retPath == null){
return;
} var direct = retPath.direct;
var step = retPath.step; self.rotateFlag = false;
self.rotateAnimate(direct,step)
}, rotateAnimate:function(type,step){
step = step || 1;
//console.log('begin rotateAnimate ' + type + "the step is " + step);
var that = this;
var zIndexArr = [];
var speed = that.setting.speed;
this.posterItems.each(function(){
var self = $(this);
var destPic = null;
var curPic = self;
for (var i = 0; i < step;++i){
if(type == "left"){// 向左边移动, 下一张图片在自己的右边,所以用next()
destPic = curPic.next().get(0)?curPic.next():that.firstPosterItem;
}
else{
destPic = curPic.prev().get(0)?curPic.prev():that.lastPosterItem;
}
curPic = destPic;
} var width = destPic.css("width");
var height = destPic.css("height");
var zIndex = destPic.css("zIndex");
var opacity = destPic.css("opacity");
var left = destPic.css("left");
var top = destPic.css("top");
zIndexArr.push(zIndex);
self.animate({
"width":width,
"height":height,
"left":left,
"opacity":opacity,
"top":top
},speed,function(){
that.rotateFlag = true;
});
});
this.posterItems.each(function(i){
$(this).css("zIndex",zIndexArr[i]);
}); if (type == 'right'){
this.refreshPositions(-step);
}else{
this.refreshPositions(step);
}
}, 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;
console.log(leftItems);
console.log(rightItems);
leftItems.each(function(index,item){
var scale = _self.setting.scale;
if(index==1){
scale = scale*scale;
}
leftWidth = posterWidth * scale;
leftHeight = posterHeight*scale;
console.log(leftWidth)
console.log(leftHeight)
$(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 scale = _self.setting.scale;
if(index==0){
scale = scale*scale;
}
var rightWidth = posterWidth * scale;
var rightHeight = posterHeight*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 align = this.setting.align;
if(align == "top") {
return 0
}else if(align == "middle"){
return (this.setting.posterHeight - height) / 2
}else if(align == "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实现旋转木马效果(带前后按钮和索引按钮)的更多相关文章
- 【前端】javascript+jQuery实现旋转木马效果轮播图slider
实现效果: 实现原理: 技术栈: javascript+jQuery+html+css 实现步骤: // 0. 获取元素 // 1. 鼠标放置到轮播图上,显示两侧的控制按钮,移开后隐藏 // 2. 为 ...
- JQuery——banner旋转木马效果
博主在浏览网页时无意间发现了一种banner图的轮播方式--像旋转木马一样的轮播方式,博主感觉非常新颖独特,经过查阅资料,观看某课网教程总算搞了出来的,其原理主要利用了JQuery代码实现,好了不多说 ...
- jQuery仿3D旋转木马效果插件(带索引按钮)
项目中需要用到旋转木马效果,但是我在网上找的插件,基本都是不带按钮或者只是带前后按钮的,而项目要求的是带索引按钮,也就是说有3张图片轮播,对应的要有3个小按钮,点击按钮,对应的图片位于中间位置.于是就 ...
- JQuery上传插件Uploadify详解及其中文按钮解决方案 .
Uploadify有一个参数是 buttonText 这个无论你怎么改都不支持中文,因为插件在js里用了一个转码方法把这个参数的值转过码了,解码的地方在那个swf文件里,看不到代码,所以这条路不行. ...
- 第一百七十二节，jQuery，动画效果
jQuery,动画效果 学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 一．显示.隐藏 jQuery 中显示方法为:. ...
- 关于自定义tabBar时修改系统自带tabBarItem属性造成的按钮顺序错乱的问题相关探究
关于自定义tabBar时修改系统自带tabBarItem属性造成的按钮顺序错乱的问题相关探究 测试代码:http://git.oschina.net/Xiyue/TabBarItem_TEST 简 ...
- jQuery操作之效果
jQuery操作之效果 效果操作一共分五类:1.基本,2.滑动,3.淡入淡出,4.自定义,5.设置 show(),hide(),toggle() 代码如下: html代码: <p style=& ...
- JQuery实战---窗口效果
在前面的相关博文中,小编对jquery的相关知识进行了简单的总结,关于jquery的很多小的知识点,都需要我们自己去动手和实践,一行行代码都需要我们自己亲自动手去敲,今天我们继续来学习jquery的相 ...
- 超炫酷的jQuery/HTML5应用效果及源码
jQuery非常强大,我们之前也用jQuery分享过很多实用的插件.HTML5可以让网页变得更加绚丽多彩,将HTML5和jQuery结合使用那将发挥更棒的效果. 今天向大家收集了一些关于HTML5和j ...
随机推荐
- Python基础之字符串(str)常用操作
1.字符串常用的方法 len()返回字符串的长度 ##Python3 >>> print(len('ab12我')) 5 ##Python2 >>> print(l ...
- Hibernate进阶学习3
Hibernate进阶学习3 测试hibernate的多表关联操作(一对多,多对一,多对多) 表之间的关系主要在类与元数据配置文件中体现 package com.hibernate.domain; i ...
- 基于centos7实现的ftp
前言 FTP(File transfer Protocl),文件传输协议,用于在网络上进行文件传输的一套标准协议,使用客户/服务器模式,属于网络传输协议的应用层.FTP服务运行在TCP/21和20端口 ...
- 解决方法:SQL Server 检测到基于一致性的逻辑 I/O 错误 校验和不正(转载)
引用:http://luowei1371984.blog.163.com/blog/static/44041589201491844323885/ SQL2008运行select count(*) f ...
- Python类与对象--基础
## 类 - 具体事物的抽象和总结,是事物的共性,由属性和方法两个部分构成,比如一个Person类,有是身高.体重.肤色等属性,也有吃饭.睡觉.观察.等方法 ## 对象 - 具体的事物,单一.个体.特 ...
- myql简单语法测试
删除某一行 delete from name1 where agee=10 limit 1; insert into name1(agee,namee)values(10,'wwww'),(10,' ...
- JZOJ 5919. 逛公园
Description 琥珀色黄昏像糖在很美的远方,思念跟影子在傍晚一起被拉长……Description 小 B 带着 GF 去逛公园,公园一共有 n 个景点,标号为 ...
- Ado访问sqlserver 端口号非1433时 连接串的写法
Provider=SQLOLEDB.;Persist Security Info=False;Data Source=hostName,Port //注意用 逗号分隔主机名与端口号
- linux学习（2）——文件和目录管理
(二) 一:绝对路径和相对路径 ...
- Flask初学者：蓝图Blueprint
蓝图这个名字好像就是根据单词Blueprint字面意思来,跟平常我们理解的蓝图完全挂不上钩,这里蓝图就是指Blueprint. 使用蓝图的好处是可以将不同功能作用的视图函数/类视图放到不同的模块中,可 ...