3D picture rotation effect is very cool, I write here just to not lose the code, nothing else.
Effect preview:
HTML code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Js 3D picture rotation by slide</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:Microsoft Yahei; }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,"New Song Style"; }/* focus_Box */
#focus_Box{position:relative;width:710px;height:500px;margin:20pxauto; }#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 rotation effect/load.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/ 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/ 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/ cat1.jpg" /></a>
</li>
<li>
<a href="#"><img width="600" height="450" src=".. /img/3D rotation effect /cat2.jpg" /></a>
</li>
<li>
<a href="#"><img width="600" height="450" src=".. /img/3D rotation effect /cat3.jpg" /></a>
</li>
<li>
<a href="#"><img width="600" height="450" src=".. /img/3D rotation effect /cat4.jpg" /></a>
</li>
<li>
<a href="#"><img width="600" height="450" src=".. /img/3D rotation effect /cat5.jpg" /></a>
</li>
</ul>
</div>
<div style="text-align:center; clear:both">
</div>
</body>
</html>
Copy the codeJs code:
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] and {opacity:100}, function ()
{
_this.doMove(_this.aSort[_this.iCenter].getElementsByTagName("img") [0] and {opacity:100}, function ()
{
_this.aSort[_this.iCenter].onmouseover = function ()
{
_this.doMove(this.getElementsByTagName("div") [0] and {bottom:0})}; _this.aSort[_this.iCenter].onmouseout =function ()
{
_this.doMove(this.getElementsByTagName("div") [0] and {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] and {opacity:100})};this.aSort[i].onmouseout = function ()
{
_this.doMove(this.getElementsByTagName("img") [0] and {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");
};
Copy the codeAdd it to your collection.
