jquery實(shí)現(xiàn)走馬燈特效實(shí)例(撲克牌切換效果）
更新時(shí)間：2022年02月20日 16:17:19 作者：霸道猿總
本文主要介紹了jquery實(shí)現(xiàn)走馬燈特效實(shí)例(撲克牌切換效果），文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
話不多說，先上大致效果：
本著程序員的開源精神，代碼奉上：
html代碼：
<div class="main-box">
<div class="poker_box">
<div class="pokerCaroursel poker-content" data-setting='{
"width":1094,
"height":338,
"pokerWidth":488,
"pokerHeight":338,
"scale":0.85,
"speed": 500,
"autoPlay":true,
"delay":2000,
"verticalAlign":"middle"
}'>
<!-- 向左按鈕 -->
<div class="poker-btn poker-prev-btn"></div>
<ul class="poker-list">
<!-- 圖片張數(shù)最好是基數(shù)，這樣呈現(xiàn)的畫面才好看 -->
<li class="poker-item poker-rad">
<div class="item">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img class="tabImg" src="images/01.jpg"></a>
<span class="poker-item-title">圖一</span>
</div>
</li>
<li class="poker-item poker-rad">
<div class="item">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img class="tabImg" src="images/02.jpg"></a>
<span class="poker-item-title">圖二</span>
</div>
</li>
<li class="poker-item poker-rad">
<div class="item">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img class="tabImg" src="images/03.jpg"></a>
<span class="poker-item-title">圖三</span>
</div>
</li>
</ul>
<!-- 向右按鈕 -->
<div class="poker-btn poker-next-btn"></div>
</div>
</div>
</div>
注意：
- 類名不要隨意更改（否則插件里面的也要更改），替換圖片地址即可。
- data-setting屬性記得按照以上格式設(shè)置，不然可能報(bào)錯(cuò)
script代碼:
<script src="jquery.js"></script>
<script src="jquery.pokerCarousel.js"></script>
<script>
pokerCaroursel.init($('.pokerCaroursel'))
</script>
注意：
要記得先引入jquery.js文件（可去官網(wǎng)下載：https://jquery.com/download/），再引入jquery.pokerCarousel.js文件
jquery.pokerCarousel.js文件完整代碼：
var MIDDLE_PIC_POS = 1
//計(jì)算如何用最短的距離移動(dòng)到目標(biāo)
//由于有兩種移動(dòng)方式,向左邊移動(dòng)或者像右邊移動(dòng),只需要在這兩種方式中選擇一個(gè)小的就行了
;(function($){
var pokerCaroursel = function (caroursel){
var self = 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");
//每個(gè)移動(dòng)元素的位置索引,用于記錄每個(gè)元素當(dāng)前的位置,在每次移動(dòng)的時(shí)候,該數(shù)組的值都會(huì)發(fā)生變化
//數(shù)組的下標(biāo)對應(yīng)li元素的位置索引
this.curPositions = [];
for(var i = 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(){
var that = this;
this.timer = window.setInterval(function(){
that.nextBtn.click();
},that.setting.dealy)
},
refreshCss:function(){
var that= this;
var curFirstPos;//當(dāng)前位于中間的li元素位置
this.buttonItems.each(function(index){
var _this = $(this);
var curPos = that.curPositions[index];
if(curPos == 1){
_this.addClass('poker-btn-active');
}
else{
_this.removeClass('poker-btn-active');
}
});
},
//記錄每次移動(dòng)的狀態(tài)
refreshPositions:function(offset){
for(var i = 0; i < this.curPositions.length; ++i)
{
var nextPos = this.curPositions[i] + offset;
if (nextPos > this.curPositions.length) {//移動(dòng)超過末尾,則位置變成到開頭
nextPos = nextPos - this.curPositions.length;
}else
if (nextPos < 1) {向左邊移動(dòng)已經(jīng)移動(dòng)到開始位置更左邊,則位置變成結(jié)束
nextPos = this.curPositions.length + nextPos;
}
this.curPositions[i] = nextPos;
}
//console.log('after refreshPositions',this.curPositions);
this.refreshCss();
},
cal_move_path:function(curPos,desPos,arraySize) {
if(curPos == desPos) return null;
//往左邊移動(dòng)
var goRightSteps;
var goLeftSteps;
var retDirect;
var retStep;
if(curPos > desPos){
goRightSteps = curPos - desPos;
goLeftSteps = desPos + (arraySize - curPos);
retDirect = (goRightSteps <= goLeftSteps) ? "left":"right";
return {"direct":retDirect,"step":Math.min(goLeftSteps,goRightSteps)};
}
},
//點(diǎn)擊位置按鈕,根據(jù)點(diǎn)擊的按鈕索引 決定向左還是向右移動(dòng)[因?yàn)橹挥腥齻€(gè)位置,該方法能夠僅靠向左或向右就能將
//指定的位置移動(dòng)到中間]
clickPosButtonIndex:function(index){
var self = this;
if(self.rotateFlag == false) {//目前正在移動(dòng)等移動(dòng)結(jié)束后才能進(jìn)入
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;
var that = this;
var zIndexArr = [];
var speed = that.setting.speed;
this.pokerItems.each(function(){
var self = $(this);
var destPic = null;
var curPic = self;
for (var i = 0; i < step;++i){
if(type == "left"){// 向左邊移動(dòng), 下一張圖片在自己的右邊,所以用next()
destPic = curPic.next().get(0)?curPic.next():that.firstpokerItem;
}
else{
destPic = curPic.prev().get(0)?curPic.prev():that.lastpokerItem;
}
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.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});
var width = (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;
var sliceItems = 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;
var i = 1;
var leftWidth = pokerWidth;
var leftHeight = pokerHeight;
var zLoop1 = level;
leftItems.each(function(index,item){
var scale = _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++;
});
var j = level;
var zLoop2 = 1;
var rightWidth = pokerWidth;
var rightHeight = pokerHeight;
rightItems.each(function(index,item){
var scale = _self.setting.scale;
if(index==0){
scale = scale*scale;
}
var rightWidth = pokerWidth * scale;
var rightHeight = 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(){
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.pokerHeight - height) / 2
}else if(align == "bottom"){
return this.setting.pokerHeight - height
}else {
return (this.setting.pokerHeight - height) / 2
}
}
};
pokerCaroursel.init = function (caroursels){
caroursels.each(function(index,item){
new pokerCaroursel($(this));
}) ;
};
window["pokerCaroursel"] = pokerCaroursel;
})(jQuery);// JavaScript Document
css代碼：
.main-box{ height: 352px; width:1118px;position: absolute;top: 122px;left: 32px;}
.poker_box h2 {font-size: 30px;color: #015293;font-weight: bold;text-align: center;}
.poker_box h3 {font-size: 16px;color: #015293;margin: 10px 0 35px;text-align: center;}
.poker-content {width: 1129px;position: relative;width: 100%;height: 350px!important;margin-left: auto;margin-right: auto;}
.poker-content img {display: block;box-shadow: 0px 0px 10px #222222;-webkit-box-shadow: 0px 0px 10px #222222;border: 0;}
.poker-content a, .poker-content img {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) none repeat scroll 0 0 !important;/*實(shí)現(xiàn)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}
到此這篇關(guān)于jquery實(shí)現(xiàn)走馬燈特效實(shí)例(撲克牌切換效果）的文章就介紹到這了,更多相關(guān)jquery 走馬燈內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Jquery解析json字符串及json數(shù)組的方法
這篇文章主要介紹了Jquery解析json字符串及json數(shù)組的方法,實(shí)例分析了jQuery操作json格式字符串與數(shù)組的相關(guān)技巧,需要的朋友可以參考下2015-05-05
使用jQuery包，實(shí)現(xiàn)表格列寬可拖拽功能，并實(shí)現(xiàn)頁面reset時(shí)的重新布局，用法及示例如下，感興趣的朋友不要錯(cuò)過2014-09-09
jQuery實(shí)現(xiàn)的兼容性浮動(dòng)層示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的兼容性浮動(dòng)層,可兼容IE、火狐等主流瀏覽器,涉及jQuery針對頁面元素的運(yùn)算與屬性的動(dòng)態(tài)設(shè)置相關(guān)技巧,需要的朋友可以參考下2016-08-08
jquery 元素選擇器使用方法技巧2008-08-08
這篇文章主要介紹了jQuery中scrollTop()方法用法,實(shí)例分析了scrollTop()方法的功能、定義及返回或設(shè)置匹配元素的滾動(dòng)條的垂直偏移量時(shí)的使用技巧,需要的朋友可以參考下2015-01-01
基于JQuery實(shí)現(xiàn)圖片上傳預(yù)覽與刪除操作
這篇文章主要為大家詳細(xì)介紹了基于JQuery實(shí)現(xiàn)圖片上傳預(yù)覽與刪除操作的相關(guān)代碼，感興趣的小伙伴們可以參考一下2016-05-05
jQuery.get、jQuery.getJSON、jQuery.post無法返回JSON問題的解決方法
在WEB項(xiàng)目中，經(jīng)常會(huì)使用到j(luò)Query進(jìn)行AJAX請求，但是自從使用了.net 3.5以后，以往寫的請求語句就有些小問題了，就是返回的始終是xml,而并不是JSON2011-07-07
jquery的checkbox,radio,select等方法小結(jié)
jquery的checkbox，radio，和select是jquery操作的一個(gè)難點(diǎn)和重點(diǎn)，很多前端新手對其了解不是很透徹。時(shí)間久了不用，我在寫的時(shí)候有時(shí)也難免對某些操作支支吾吾，記不清楚，現(xiàn)在，對其做一些簡單的總結(jié)2016-08-08
jquery中實(shí)現(xiàn)簡單的tabs插件功能的代碼
jquery改變了程序員寫javascript的方式。作為jquery的愛好者和新手，最近我學(xué)會(huì)了用寥寥幾句jquery代碼實(shí)現(xiàn)類似tabs插件的功能，相信此文能為許多剛?cè)腴T的jquery愛好者和想實(shí)現(xiàn)tabs插件功能的朋友帶來一些幫助。2011-03-03
jQuery-Tools-overlay 使用介紹，需要的朋友可以參考下2012-07-07