js實現圖片3D輪播效果（收藏）
阿新 • • 發佈：2019-02-20
3D的圖片輪播效果很炫，寫到這裡只是為了不丟程式碼，不為別的。
效果預覽：
html程式碼：
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js實現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"); };
收藏一下。
