本文小编为大家详细介绍“jquery如何实现走马灯特效”，内容详细，步骤清晰，细节处理妥当，希望这篇“jquery如何实现走马灯特效”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

话不多说，先上大致效果：

html代码：

<divclass="main-box"><divclass="poker_box"><divclass="pokerCarourselpoker-content"data-setting='{"width":1094,"height":338,"pokerWidth":488,"pokerHeight":338,"scale":0.85,"speed":500,"autoPlay":true,"delay":2000,"verticalAlign":"middle"}'><!--向左按钮--><divclass="poker-btnpoker-prev-btn"></div><ulclass="poker-list"><!--图片张数最好是基数，这样呈现的画面才好看--><liclass="poker-itempoker-rad"><divclass="item"><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"><imgclass="tabImg"src="images/01.jpg"></a><spanclass="poker-item-title">图一</span></div></li><liclass="poker-itempoker-rad"><divclass="item"><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"><imgclass="tabImg"src="images/02.jpg"></a><spanclass="poker-item-title">图二</span></div></li><liclass="poker-itempoker-rad"><divclass="item"><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"><imgclass="tabImg"src="images/03.jpg"></a><spanclass="poker-item-title">图三</span></div></li></ul><!--向右按钮--><divclass="poker-btnpoker-next-btn"></div></div></div></div>

注意：

类名不要随意更改（否则插件里面的也要更改），替换图片地址即可。

data-setting属性记得按照以上格式设置，不然可能报错

script代码:

<scriptsrc="jquery.js"></script><scriptsrc="jquery.pokerCarousel.js"></script><script>pokerCaroursel.init($('.pokerCaroursel'))</script>

注意：
要记得先引入jquery.js文件（可去官网下载：https://jquery.com/download/），再引入jquery.pokerCarousel.js文件

jquery.pokerCarousel.js文件完整代码：

varMIDDLE_PIC_POS=1//计算如何用最短的距离移动到目标//由于有两种移动方式,向左边移动或者像右边移动,只需要在这两种方式中选择一个小的就行了;(function($){varpokerCaroursel=function(caroursel){varself=this;this.caroursel=caroursel;this.pokerList=caroursel.find(".poker-list");this.pokerItems=caroursel.find(".poker-item");this.firstpokerItem=this.pokerItems.first();this.lastpokerItem=this.pokerItems.last();this.prevBtn=this.caroursel.find(".poker-prev-btn");this.nextBtn=this.caroursel.find(".poker-next-btn");this.buttonItems=caroursel.find(".tabBtn");//每个移动元素的位置索引,用于记录每个元素当前的位置,在每次移动的时候,该数组的值都会发生变化//数组的下标对应li元素的位置索引this.curPositions=[];for(vari=0;i<this.pokerItems.length;++i){this.curPositions[i]=i+1;}this.setting={"width":"1106","height":"340","pokerWidth":"488","pokerHeight":"340","scale":"0.8","speed":"1000","isAutoplay":"true","dealy":"2000"};$.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()})}};pokerCaroursel.prototype={autoPlay:function(){varthat=this;this.timer=window.setInterval(function(){that.nextBtn.click();},that.setting.dealy)},refreshCss:function(){varthat=this;varcurFirstPos;//当前位于中间的li元素位置this.buttonItems.each(function(index){var_this=$(this);varcurPos=that.curPositions[index];if(curPos==1){_this.addClass('poker-btn-active');}else{_this.removeClass('poker-btn-active');}});},//记录每次移动的状态refreshPositions:function(offset){for(vari=0;i<this.curPositions.length;++i){varnextPos=this.curPositions[i]+offset;if(nextPos>this.curPositions.length){//移动超过末尾,则位置变成到开头nextPos=nextPos-this.curPositions.length;}elseif(nextPos<1){向左边移动已经移动到开始位置更左边,则位置变成结束nextPos=this.curPositions.length+nextPos;}this.curPositions[i]=nextPos;}//console.log('afterrefreshPositions',this.curPositions);this.refreshCss();},cal_move_path:function(curPos,desPos,arraySize){if(curPos==desPos)returnnull;//往左边移动vargoRightSteps;vargoLeftSteps;varretDirect;varretStep;if(curPos>desPos){goRightSteps=curPos-desPos;goLeftSteps=desPos+(arraySize-curPos);retDirect=(goRightSteps<=goLeftSteps)?"left":"right";return{"direct":retDirect,"step":Math.min(goLeftSteps,goRightSteps)};}},//点击位置按钮,根据点击的按钮索引决定向左还是向右移动[因为只有三个位置,该方法能够仅靠向左或向右就能将//指定的位置移动到中间]clickPosButtonIndex:function(index){varself=this;if(self.rotateFlag==false){//目前正在移动等移动结束后才能进入return;}varcurPos=this.curPositions[index];varretPath=this.cal_move_path(curPos,MIDDLE_PIC_POS,this.curPositions.length);if(retPath==null){return;}vardirect=retPath.direct;varstep=retPath.step;self.rotateFlag=false;self.rotateAnimate(direct,step)},rotateAnimate:function(type,step){step=step||1;varthat=this;varzIndexArr=[];varspeed=that.setting.speed;this.pokerItems.each(function(){varself=$(this);vardestPic=null;varcurPic=self;for(vari=0;i<step;++i){if(type=="left"){//向左边移动,下一张图片在自己的右边,所以用next()destPic=curPic.next().get(0)?curPic.next():that.firstpokerItem;}else{destPic=curPic.prev().get(0)?curPic.prev():that.lastpokerItem;}curPic=destPic;}varwidth=destPic.css("width");varheight=destPic.css("height");varzIndex=destPic.css("zIndex");varopacity=destPic.css("opacity");varleft=destPic.css("left");vartop=destPic.css("top");zIndexArr.push(zIndex);self.animate({"width":width,"height":height,"left":left,"opacity":opacity,"top":top},speed,function(){that.rotateFlag=true;});});this.pokerItems.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.pokerList.css({"width":this.setting.width,"height":this.setting.height});varwidth=(this.setting.width-this.setting.pokerWidth)/2;console.log(this.pokerItems.length)this.prevBtn.css({"width":width,"height":this.setting.height,"zIndex":Math.ceil(this.pokerItems.length/2)});this.nextBtn.css({"width":width,"height":this.setting.height,"zIndex":Math.ceil(this.pokerItems.length/2)});this.firstpokerItem.css({"width":this.setting.pokerWidth,"height":this.setting.pokerHeight,"left":width,"zIndex":Math.ceil(this.pokerItems.length/2),"top":this.setVertialType(this.setting.pokerHeight)});},setSlicePosition:function(){var_self=this;varsliceItems=this.pokerItems.slice(1),level=Math.floor(this.pokerItems.length/2),leftItems=sliceItems.slice(0,level),rightItems=sliceItems.slice(level),pokerWidth=this.setting.pokerWidth,pokerHeight=this.setting.pokerHeight,Btnwidth=(this.setting.width-this.setting.pokerWidth)/2,gap=Btnwidth/level,containerWidth=this.setting.width;vari=1;varleftWidth=pokerWidth;varleftHeight=pokerHeight;varzLoop1=level;leftItems.each(function(index,item){varscale=_self.setting.scale;if(index==1){scale=scale*scale;}leftWidth=pokerWidth*scale;leftHeight=pokerHeight*scale;$(this).css({"width":leftWidth,"height":leftHeight,"left":Btnwidth-i*gap,"zIndex":zLoop1--,"opacity":2/(i+1),"top":_self.setVertialType(leftHeight)});i++;});varj=level;varzLoop2=1;varrightWidth=pokerWidth;varrightHeight=pokerHeight;rightItems.each(function(index,item){varscale=_self.setting.scale;if(index==0){scale=scale*scale;}varrightWidth=pokerWidth*scale;varrightHeight=pokerHeight*scale;$(this).css({"width":rightWidth,"height":rightHeight,"left":containerWidth-(Btnwidth-j*gap+rightWidth),"zIndex":zLoop2++,"opacity":2/(j+1),"top":_self.setVertialType(rightHeight)});j--;});},getSetting:function(){varsettting=this.caroursel.attr("data-setting");if(settting.length>0){return$.parseJSON(settting);}else{return{};}},setVertialType:function(height){varalign=this.setting.align;if(align=="top"){return0}elseif(align=="middle"){return(this.setting.pokerHeight-height)/2}elseif(align=="bottom"){returnthis.setting.pokerHeight-height}else{return(this.setting.pokerHeight-height)/2}}};pokerCaroursel.init=function(caroursels){caroursels.each(function(index,item){newpokerCaroursel($(this));});};window["pokerCaroursel"]=pokerCaroursel;})(jQuery);//JavaScriptDocument

css代码：

.main-box{height:352px;width:1118px;position:absolute;top:122px;left:32px;}.poker_boxh3{font-size:30px;color:#015293;font-weight:bold;text-align:center;}.poker_boxh4{font-size:16px;color:#015293;margin:10px035px;text-align:center;}.poker-content{width:1129px;position:relative;width:100%;height:350px!important;margin-left:auto;margin-right:auto;}.poker-contentimg{display:block;box-shadow:0px0px10px#222222;-webkit-box-shadow:0px0px10px#222222;border:0;}.poker-contenta,.poker-contentimg{display:block;width:100%;height:100%;border:none;}img{border:none;display:block;}.poker-content.poker-list{width:1118px;height:500px;}.poker-content.poker-list.poker-item{width:200px;height:350px;position:absolute;left:0;top:0;}.poker-rad{border-radius:20px;overflow:hidden;}.poker-rai{border-radius:20px;overflow:hidden;}.poker-content.poker-list.poker-item.item{position:relative;width:100%;height:100%;}.poker-content.poker-btn{position:absolute;top:0;cursor:pointer;filter:opacity(.5)brightness(1);}.poker-content.poker-btn:hover{filter:opacity(1)brightness(2);}.poker-content.poker-prev-btn{left:0;}.poker-content.poker-next-btn{right:0;}.poker-item-title{background:rgba(42,42,42,0.8)nonerepeatscroll00!important;/*实现FF背景透明，文字不透明*/filter:Alpha(opacity=80);background:#2a2a2a;text-align:center;color:#FFF;width:100%;height:52px;line-height:52px;position:absolute;bottom:0;text-indent:29px}

读到这里，这篇“jquery如何实现走马灯特效”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。