jQuery多图3D旋转图片轮播

kevin-ying · 发表于 2015-9-24 18:09:28

[HTML] 纯文本查看 复制代码

<html xml:lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta name="Copyright" content="www.kevin-ying.com" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<link href="http://www.kevin-ying.com/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<title>jQuery多图3D旋转图片轮播 | 源与生活 站长工具 by:文歌提供([url]www.kevin-ying.com[/url])</title>
<head>
<style>
/* CSS Document */
*{ margin:0; padding:0; list-style:none; }
body{ font-size:13px; color:#FFF; font-family:Arial, Helvetica, sans-serif;}
.clear{ clear:both; line-height:0; font-size:0; height:0;}

#jswbox{width:1100px; margin:50px auto;}
#jswbox ul{position:relative;height:600px;}
#jswbox li{position:absolute;width:0;height:0;z-index:0;cursor:pointer;overflow:hidden;top:152px; left:10px;}
#jswbox li img{width:100%;height:100%;vertical-align:top; float:left; border:0;}
#jswbox .prev, #jswbox .next{ display:none;}
</style>
<script type="text/javascript" src="http://www.kevin-ying.com/jq/jquery-2.1.4.min.js"></script>
<script>
$(function(){
	new ZoomPic("jswbox");
	
})
/* 爵士舞导师团队点击切换滚动动画 */
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("pre")[0];this.next=this.wrap.getElementsByTagName("pre")[1];this.timer=null;this.aSort=[];this.iCenter=3;this._doPrev=function(){return _this.doPrev.apply(_this)};this._doNext=function(){return _this.doNext.apply(_this)};this.options=[{width:262,height:389,top:152,left:0,zIndex:1},{width:262,height:389,top:152,left:0,zIndex:2},{width:262,height:389,top:152,left:200,zIndex:3},{width:300,height:445,top:124,left:388,zIndex:4},{width:262,height:389,top:152,left:668,zIndex:3},{width:262,height:389,top:152,left:834,zIndex:2},{width:262,height:389,top:152,left:450,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<7)
{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",152);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",30)
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:35})};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;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)}};
/*导师动画调用*/
</script>
</head>
<body>
<div id="jswbox">
    <pre class="prev">prev</pre>
    <pre class="next">next</pre>
    <ul>
        <li style="display: block; width: 262px; height: 389px; top: 152px; left: 0px; z-index: 1; "><img src="http://date.kevin-ying.com/bbs_up/forum/201507/10/090247izkvtiw40c4i54ww.png" data-url="images/13721449166318.jpg" alt="derrick" style="opacity: 87; "></li>
        <li style="display: block; width: 262px; height: 389px; top: 152px; left: 0px; z-index: 2; "><img src="http://date.kevin-ying.com/bbs_up/forum/201507/10/085058b3l73ixo66x7x3do.png" data-url="http://date.kevin-ying.com/bbs_up/forum/201507/10/090246m89z9vv9ivivwiwi.png" alt="MAGGIE" style="opacity: 87; "></li>
        <li style="display: block; width: 262px; height: 389px; top: 152px; left: 200px; z-index: 3; "><img src="http://date.kevin-ying.com/bbs_up/forum/201507/10/085058b3l73ixo66x7x3do.png" data-url="images/1372144645552.jpg" alt="许在浩" style="opacity: 87; "></li>
        <li style="display: block; width: 300px; height: 445px; left: 388px; z-index: 4; top: 124px; "><img src="http://date.kevin-ying.com/bbs_up/forum/201507/10/085056wzqmjt2qrymwn2jm.png" data-url="images/13721443987501.jpg" alt="颜子超" style="opacity: 87; "></li>
        <li style="display: block; width: 262px; height: 389px; left: 668px; z-index: 3; top: 152px; "><img src="http://date.kevin-ying.com/bbs_up/forum/201507/10/085053ecc5o40e5x1c5z1e.png" data-url="images/13721468495688.jpg" alt="万玲玲" style="opacity: 87; "></li>
        <li style="display: block; width: 262px; height: 389px; left: 834px; z-index: 2; top: 152px; "><img src="http://date.kevin-ying.com/bbs_up/forum/201507/10/085048yvdes6hhviwdchs3.png" data-url="images/13721449166318.jpg" alt="derrick" style="opacity: 87; "></li>
        <li style="display: block; width: 262px; height: 389px; top: 152px; left: 450px; z-index: 1; "><img src="http://date.kevin-ying.com/bbs_up/album/201403/29/045224bzqiggmi7nege56y.png" data-url="images/13721447673663.jpg" alt="MAGGIE" style="opacity: 87; "></li>
    </ul>
</div>
</body>
</html>

		自动登录	找回密码
密码			免费注册

[Jquery] jQuery多图3D旋转图片轮播

本帖被以下淘专辑推荐:

相关帖子