用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: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;}
body{color:#666; background-color:#fff;}
.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{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: 10;
}
.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: 10;
}
.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实现旋转木马效果(带前后按钮和索引按钮)相关推荐

css3旋转木马轮播图,超酷jQuery 3D旋转木马效果轮播图插件
jCarrousel是一款炫酷且强大的3D旋转木马效果轮播图jQuery插件.该旋转木马插件可以自适应屏幕大小来调整图片的间距,可实现自动播放等.jCarrousel代码简洁,使用简单,值得推荐. 由 ...
html旋转木马切换效果,超酷jQuery 3D旋转木马效果轮播图插件 -HTML5功能
简要教程 jCarrousel是一款炫酷且强大的3D旋转木马效果轮播图jQuery插件.该旋转木马插件可以自适应屏幕大小来调整图片的间距,可实现自动播放等.jCarrousel代码简洁,使用简单,值得 ...
html圆形按钮和箭头同时变色,JQuery和html+css实现带小圆点和左右按钮的轮播图
是的!你没看错!还是轮播图.这次的JQuery的哟!! CSS代码: /*轮播图左右按钮小白点*/ #second_div{ margin-top: 160px; } .img_box{ over ...
怎么做轮播图中的小圆点html,JQuery和html+css实现带小圆点和左右按钮的轮播图实例...
是的!你没看错!还是轮播图.这次的JQuery的哟!! CSS代码: /*轮播图左右按钮小白点*/ #second_div{ margin-top: 160px; } .img_box{ over ...
第一百七十二节，jQuery，动画效果
jQuery,动画效果学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性一．显示.隐藏 jQuery 中显示方法为:. ...
JQuery上传插件Uploadify详解及其中文按钮解决方案
网上找了一天,大家都说Uploadify唯一的缺点就是不支持中文按钮,杯具之前,我看了下Uploadify的API,才发现了几个参数没被大家提及的,这正是解决此问题的关键.(以后坚决养成没事就看API ...
JQuery绑定及效果
JQuery绑定及效果文章目录 JQuery绑定及效果一.JQuery的四种事件绑定 1.bind(type,[data],function(eventObject)) 2.live(type, ...
php jquery进度条,如何实现jQuery进度条效果
通过jQMeter.js插件可以简单的实现jQuery进度条效果,并且可以自定义它的样式实现jQuery进度条效果需要外部引入一个jQuery插件jQMeter.js.它是一款简单实用的轻量级进度条 ...
10 个非常酷的基于jQuery的菜单效果插件
除了直观的界面效果外,炫酷的网站导航菜单或右键菜单也能为访问者带来眼前一亮的感觉.本文为你带来10个非常酷的基于jQuery的菜单效果插件. 1. 右击菜单一个创建右击菜单的插件,简洁且易用. 源 ...

用jQuery实现旋转木马效果(带前后按钮和索引按钮)

用jQuery实现旋转木马效果(带前后按钮和索引按钮)相关推荐

最新文章

热门文章