js實(shí)現(xiàn)圖片3D輪播效果
更新時(shí)間：2019年09月21日 10:13:29 作者：何處錦繡不灰堆
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片3D輪播效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
3D的圖片輪播效果很炫，寫(xiě)到這里只是為了不丟代碼，不為別的。
效果預(yù)覽：
html代碼：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js實(shí)現(xiàn)3D圖片逐張輪播幻燈片</title>
</head>
<body>
<style>
ul#bcty365_nav{padding-left:50px; margin-bottom:10px; border-bottom:2px solid #ccc; overflow:hidden; _zoom:1;}
ul#bcty365_nav li{float:left; display:inline; margin:10px;}
ul#bcty365_nav li a{display:block;color:#000000; font-size:16px;}
ul#bcty365_nav li a,#wimoban_p,#wimoban_p a{ font-family:"微軟雅黑";}
ul#bcty365_nav li a:hover,#wimoban_p a:hover{color:red;}
</style>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif,"新宋體";}
/* focus_Box */
#focus_Box{position:relative;width:710px;height:500px;margin:20px auto;}
#focus_Box ul{position:relative;width:710px;height:500px}
#focus_Box li{z-index:0;position:absolute; width:0px;background:#787878;height:0px;top:146px;cursor:pointer;left:377px;border-radius:4px;box-shadow:1px 1px 12px rgba(200, 200, 200, 1)}
#focus_Box li img{width:100%;background:url(../img/3D輪播效果/loading.gif) no-repeat center 50%;height:100%;vertical-align:top}
#focus_Box li p{position:absolute;left:0;bottom:0px;width:100%;height:40px;line-height:40px;background:url(images/float-bg.png) repeat;text-indent:8px;color:#fff;}
#focus_Box li p span{display:inline-block;width:70%;height:40px;overflow:hidden;}
#focus_Box .prev,#focus_Box .next{display:block;z-index:100;overflow:hidden;cursor:pointer;position:absolute;width:52px;height:52px;top:131px;}
/*#focus_Box .prev{background:url(../img/3D輪播效果/btn.png) left bottom no-repeat;left:0px}
#focus_Box .next{background:url(../img/3D輪播效果/btn.png) right bottom no-repeat;right:0px} */
#focus_Box .prev:hover{background-position:left top;}
#focus_Box .next:hover{background-position:right top;}
/*#focus_Box a.imgs-scroll-btn{display:block;position:absolute;z-index:110;top:7px;right:15px;width:51px;height:23px;overflow:hidden;background:url(images/share-btn.png) no-repeat;text-indent:-999px;}*/
</style>
<script src="../js/3D輪播效果/ZoomPic.js"></script>
<div id="focus_Box">
<span class="prev"> </span>
<span class="next"> </span>
<ul>
<li>
<a href="#" ><img width="600" height="450" src="../img/3D輪播效果/cat1.jpg" /></a>
</li>
<li>
<a href="#" ><img width="600" height="450" src="../img/3D輪播效果/cat2.jpg" /></a>
</li>
<li>
<a href="#" ><img width="600" height="450" src="../img/3D輪播效果/cat3.jpg" /></a>
</li>
<li>
<a href="#" ><img width="600" height="450" src="../img/3D輪播效果/cat4.jpg" /></a>
</li>
<li>
<a href="#" ><img width="600" height="450" src="../img/3D輪播效果/cat5.jpg" /></a>
</li>
</ul>
</div>
<div style="text-align:center;clear:both">
</div>
</body>
</html>
js代碼：
function ZoomPic ()
{
this.initialize.apply(this, arguments)
}
ZoomPic.prototype =
{
initialize : function (id)
{
var _this = this;
this.wrap = typeof id === "string" ? document.getElementById(id) : id;
this.oUl = this.wrap.getElementsByTagName("ul")[0];
this.aLi = this.wrap.getElementsByTagName("li");
this.prev = this.wrap.getElementsByTagName("span")[0];
this.next = this.wrap.getElementsByTagName("span")[1];
this.timer = 1000;
this.aSort = [];
this.iCenter = 2;
this._doPrev = function () {return _this.doPrev.apply(_this)};
this._doNext = function () {return _this.doNext.apply(_this)};
this.options = [
/*{width:476, height:210, top:40, left:0, zIndex:1},
{width:426, height:250, top:20, left:50, zIndex:2},
{width:654, height:290, top:0, left:150, zIndex:3},
{width:426, height:250, top:20, left:480, zIndex:2},
{width:476, height:210, top:40, left:476, zIndex:1},*/
{width:365, height:252, top:40, left:0, zIndex:1},
{width:405, height:280, top:20, left:60, zIndex:2},
{width:445, height:308, top:0, left:130, zIndex:3},
{width:405, height:280, top:20, left:240, zIndex:2},
{width:366, height:252, top:40, left:345, zIndex:1},
];
for (var i = 0; i < this.aLi.length; i++) this.aSort[i] = this.aLi[i];
this.aSort.unshift(this.aSort.pop());
this.setUp();
this.addEvent(this.prev, "click", this._doPrev);
this.addEvent(this.next, "click", this._doNext);
this.doImgClick();
this.timer = setInterval(function ()
{
_this.doNext()
}, 3000);
this.wrap.onmouseover = function ()
{
clearInterval(_this.timer)
};
this.wrap.onmouseout = function ()
{
_this.timer = setInterval(function ()
{
_this.doNext()
}, 3000);
}
},
doPrev : function ()
{
this.aSort.unshift(this.aSort.pop());
this.setUp()
},
doNext : function ()
{
this.aSort.push(this.aSort.shift());
this.setUp()
},
doImgClick : function ()
{
var _this = this;
for (var i = 0; i < this.aSort.length; i++)
{
this.aSort[i].onclick = function ()
{
if (this.index > _this.iCenter)
{
for (var i = 0; i < this.index - _this.iCenter; i++) _this.aSort.push(_this.aSort.shift());
_this.setUp()
}
else if(this.index < _this.iCenter)
{
for (var i = 0; i < _this.iCenter - this.index; i++) _this.aSort.unshift(_this.aSort.pop());
_this.setUp()
}
}
}
},
setUp : function ()
{
var _this = this;
var i = 0;
for (i = 0; i < this.aSort.length; i++) this.oUl.appendChild(this.aSort[i]);
for (i = 0; i < this.aSort.length; i++)
{
this.aSort[i].index = i;
if (i < 5)
{
this.css(this.aSort[i], "display", "block");
this.doMove(this.aSort[i], this.options[i], function ()
{
_this.doMove(_this.aSort[_this.iCenter].getElementsByTagName("img")[0], {opacity:100}, function ()
{
_this.doMove(_this.aSort[_this.iCenter].getElementsByTagName("img")[0], {opacity:100}, function ()
{
_this.aSort[_this.iCenter].onmouseover = function ()
{
_this.doMove(this.getElementsByTagName("div")[0], {bottom:0})
};
_this.aSort[_this.iCenter].onmouseout = function ()
{
_this.doMove(this.getElementsByTagName("div")[0], {bottom:-100})
}
})
})
});
}
else
{
this.css(this.aSort[i], "display", "none");
this.css(this.aSort[i], "width", 0);
this.css(this.aSort[i], "height", 0);
this.css(this.aSort[i], "top", 37);
this.css(this.aSort[i], "left", this.oUl.offsetWidth / 2)
}
if (i < this.iCenter || i > this.iCenter)
{
this.css(this.aSort[i].getElementsByTagName("img")[0], "opacity", 100)
this.aSort[i].onmouseover = function ()
{
_this.doMove(this.getElementsByTagName("img")[0], {opacity:100})
};
this.aSort[i].onmouseout = function ()
{
_this.doMove(this.getElementsByTagName("img")[0], {opacity:100})
};
this.aSort[i].onmouseout();
}
else
{
this.aSort[i].onmouseover = this.aSort[i].onmouseout = null
}
}
},
addEvent : function (oElement, sEventType, fnHandler)
{
return oElement.addEventListener ? oElement.addEventListener(sEventType, fnHandler, false) : oElement.attachEvent("on" + sEventType, fnHandler)
},
css : function (oElement, attr, value)
{
if (arguments.length == 2)
{
return oElement.currentStyle ? oElement.currentStyle[attr] : getComputedStyle(oElement, null)[attr]
}
else if (arguments.length == 3)
{
switch (attr)
{
case "width":
case "height":
case "top":
case "left":
case "bottom":
oElement.style[attr] = value + "px";
break;
case "opacity" :
oElement.style.filter = "alpha(opacity=" + value + ")";
oElement.style.opacity = value / 100;
break;
default :
oElement.style[attr] = value;
break
}
}
},
doMove : function (oElement, oAttr, fnCallBack)
{
var _this = this;
clearInterval(oElement.timer);
oElement.timer = setInterval(function ()
{
var bStop = true;
for (var property in oAttr)
{
var iCur = parseFloat(_this.css(oElement, property));
property == "opacity" && (iCur = parseInt(iCur.toFixed(2) * 100));
var iSpeed = (oAttr[property] - iCur) / 5;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (iCur != oAttr[property])
{
bStop = false;
_this.css(oElement, property, iCur + iSpeed)
}
}
if (bStop)
{
clearInterval(oElement.timer);
fnCallBack && fnCallBack.apply(_this, arguments)
}
}, 30)
}
};
window.onload = function ()
{
new ZoomPic("focus_Box");
};
收藏一下。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了使用JS獲取當(dāng)前地理位置方法匯總,需要的朋友可以參考下2014-12-12
使用BootStrap實(shí)現(xiàn)標(biāo)簽切換原理解析
本文給大家分享使用BootStrap實(shí)現(xiàn)標(biāo)簽切換原理解析及核心代碼，需要的朋友參考下2017-03-03
JavaScript 創(chuàng)建隨機(jī)數(shù)和隨機(jī)圖片
關(guān)于javascript隨機(jī)數(shù)的，很早以前的文章了，不過(guò)內(nèi)容還是不錯(cuò)的，如果想要更多的效果，可以去腳本之家搜下。2009-12-12
新手學(xué)習(xí)前端之js模仿淘寶主頁(yè)網(wǎng)站
淘寶網(wǎng)大家在熟悉不過(guò)了，那么淘寶網(wǎng)首頁(yè)模板是怎么做的呢？今天小編抽時(shí)間給大家分享新手學(xué)習(xí)前端之js模仿淘寶主頁(yè)網(wǎng)站的相關(guān)資料,需要的朋友可以參考下2016-10-10
Javascript 網(wǎng)頁(yè)水印(非圖片水印)實(shí)現(xiàn)代碼
在一些B/S結(jié)構(gòu)的應(yīng)用系統(tǒng)中，有很多頁(yè)面是需要有水印的。常見(jiàn)的就是公文系統(tǒng)、合同系統(tǒng)等。2010-03-03
這篇文章主要介紹了基于JavaScript獲取url參數(shù)2種方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04
通用的加入收藏夾代碼支持IE Firefox等瀏覽器...2007-06-06
JavaScript 驗(yàn)證碼的實(shí)例代碼(附效果圖)
JavaScript 驗(yàn)證碼的實(shí)例代碼(附效果圖)，需要的朋友可以參考一下2013-03-03
javascript實(shí)現(xiàn)京東快遞單號(hào)的查詢效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)京東快遞單號(hào)的查詢效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
Promise是異步編程的一種解決方案,比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大,下面這篇文章主要給大家介紹了關(guān)于ES6中promise詳解及用法的相關(guān)資料,需要的朋友可以參考下2022-11-11