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="image/a1.png" width = "100%" height="100%"></li> <li class = "poster-item"><img src="image/a2.png" width = "100%" height="100%"></li> <li class = "poster-item"><img src="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: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: #808080; z-index: 10; } .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);
效果图：
