jQuery多图3D旋转图片轮播滚动切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery多图3D旋转图片轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery多图3D旋转图片轮播</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/comm.js" type="text/javascript"></script>
<script>
$(function(){
	new ZoomPic("jswbox");
	
})
</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="images/1.jpg" 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="images/2.jpg" data-url="images/13721447673663.jpg" alt="MAGGIE" style="opacity: 87; "></li>
    <li style="display: block; width: 262px; height: 389px; top: 152px; left: 200px; z-index: 3; "><img src="images/3.jpg" 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="images/4.jpg" 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="images/5.jpg" 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="images/6.jpg" 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="images/7.jpg" data-url="images/13721447673663.jpg" alt="MAGGIE" style="opacity: 87; "></li>
   
  </ul>
</div>
<div style="text-align:center;clear:both">
<p> </p>
</div>
</body>
</html>

JS代码(comm.js):

// JavaScript Document/* 爵士舞导师团队点击切换滚动动画 */
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)}
}
;
	/*导师动画调用*/
function chekmsg(o){
	if(o.contact.value==""){
	alert('请填写昵称')return false}
/*var mail = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
	if(!mail.test(o.email.value)){
	alert("请填写邮箱");
	return false;
}
*/
if(o.qq.value==""){
	alert('请填写QQ')return false;
}
if(o.title.value==""){
	alert('请填写主题')return false;
}
if(o.content.value==""){
	alert('请填写内容')return false}
if(o.code.value==""){
	alert('请填写验证码')return false}
}
function chekbook(o){
	if(o.contact.value==""){
	alert('请填写姓名')return false;
}
if(o.tel.value==""){
	alert('请填写联系方式')return false;
}
}
function getvideo(c,i){
	$.post("server.php",{
	action:'getvideo',channel:c,id:i}
,function(data){
	arr=data.split("||")str='<embed id="vshow" src="'+arr[0]+'" quality="high" width="548" height="334" align="middle" allowScriptAccess="always" allowFullScreen="true" mode="transparent" type="application/x-shockwave-flash"></embed>'$("#v").html(str)}
)}
function loads(){
	$('#slides').slides({
	preload:false,preloadImage:'/images/loading.gif',effect:'fade',slideSpeed:400,fadeSpeed:100,play:3000,pause:100,hoverPause:true}
);
}
function nTabs(thisObj,Num){
	if(thisObj.className == "active")return;
	var tabObj = thisObj.parentNode.id;
	var tabList = document.getElementById(tabObj).getElementsByTagName("li");
	for(i=0;
	i <tabList.length;
	i++){
	if (i == Num){
	thisObj.className = "active";
	document.getElementById(tabObj+"_Content"+i).style.display = "block";
}
else{
	tabList[i].className = "normal";
	document.getElementById(tabObj+"_Content"+i).style.display = "none";
}
}
}

CSS代码(css.css):

/* 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;}

附件:下载该文件资源,减少时间成本(增值服务)