jquery 3D旋转banner图效果 demo_jquery 3d立方体翻转 banner-CSDN博客

本文链接：https://blog.csdn.net/u010460625/article/details/109305472
jquery 3D旋转banner图效果 demo
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>3D旋转banner图效果</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<style type="text/css" id="css">
		*{margin:0;padding:0;}
		#banner{
			width:800px;
			height:360px;/* 
			background:#ccc; */
			margin:100px auto;
			perspective:800px;
			position:relative;
		}
		#banner ul li{/* 
			width:160px; */
			height:360px;
			list-style:none;/* 
			border:1px solid #f00; */
			float:left;
			position:relative;
			transform-style:preserve-3d;
			transform:translateZ(-180px);
		}
		#banner ul li div{/* 
			border:1px solid #0f0; *//* 
			width:160px; */
			height:360px;
			position:absolute;
		}
		#banner ul li div:nth-child(1){
			bottom:360px;
			transform-origin:bottom;
			transform:translateZ(180px) rotateX(90deg);
			background:url(img/1.jpg);
		}
		#banner ul li div:nth-child(2){
			top:360px;
			transform-origin:top;
			transform:translateZ(180px) rotateX(-90deg);
			background:url(img/2.jpg);
		}
		#banner ul li div:nth-child(3){
			transform:translateZ(180px);
			background:url(img/3.jpg);
		}
		#banner ul li div:nth-child(4){
			transform:translateZ(-180px) rotateX(180deg);
			background:url(img/4.png);
		}
	/* 	#banner ul li div:nth-child(5){
			background:url(img/470.jpg);
			width:360px;
			right:160px;
			transform-origin:right;
			transform:translateZ(180px) rotateY(-90deg);
		}
		#banner ul li div:nth-child(6){
			width:360px;
			left:160px;
			transform-origin:left;
			transform:translateZ(180px) rotateY(90deg);
			background:url(img/9252150_193011306000_2.jpg.jpg);
		} */
		/* #banner:hover ul li{
			transform:translateZ(-180px) rotateX(180deg);
		} */
		/* #banner ul li:nth-child(1) div{
			background-position:0px;
		}
		#banner ul li:nth-child(2) div{
			background-position:-160px;
		}
		#banner ul li:nth-child(3) div{
			background-position:-320px;
		}
		#banner ul li:nth-child(4) div{
			background-position:-480px;
		}
		#banner ul li:nth-child(5) div{
			background-position:-640px;
		} */
		#banner ul li:nth-child(1){
			transition:1s 0s;
		}
		#banner ul li:nth-child(2){
			transition:1s .3s;
		}
		#banner ul li:nth-child(3){
			transition:1s .6s;
		}
		#banner ul li:nth-child(4){
			transition:1s .9s;
		}
		#banner ul li:nth-child(5){
			transition:1s 1.2s;
		}
		#banner ol{
			width:120px;
			height:18px;
			position:absolute;
			bottom:10px;
			right:10px;
		}
		#banner ol li{
			list-style:none;
			width:18px;
			height:18px;
			background:#777;
			border-radius:9px;
			color:#fff;
			font-size:12px;
			text-align:center;
			line-height:18px;
			font-family:"微软雅黑";
			float:left;
			margin:0 5px;
			cursor:pointer;
			box-shadow:2px 2px 5px #fff;
		}
	</style>
	<script type="text/javascript">
		window.onload = function(){
			play(5);
			function play(num){
				var ol = document.getElementById("ol");
				var ul = document.getElementById("ul");
				var css= document.getElementById("css");
				var oLi = ol.getElementsByTagName("li");
				var Wid = 800/num;
				var uLi = null;
				var uHTML = '',pHTML ='',zHTML='',z=0;
				for(var i=0;i<num;i++){
					if(i> num/2){
						z--;
						zHTML +='#banner ul li:nth-child('+i+1+'){z-index:'+z+';}';
					}
					uHTML+='<li><div></div><div></div><div></div><div></div></li>';
					pHTML+='#banner ul li:nth-child('+i+1+') div{background-position:'+(-1*Wid)+'px;}';
				}
				
				ul.innerHTML=uHTML;
				css.innerHTML += zHTML + pHTML +'#banner ul li{width:'+Wid+'px} #banner ul li div{width:'+Wid+'px;}';
				uLi = ul.getElementsByTagName("li");
				for(var i=0;i<oLi.length;i++){
					oLi[i].index = i;
					oLi[i].onclick = function(){
						for(var j=0;j<uLi.length;j++){
							uLi[j].style.transform = 'translateZ(-180px) rotateX('+this.index*90+'deg)';
						}
						for(var k=0;k<oLi.length;k++){
							k == this.index ?oLi[k].style.backgroundColor='#f40':oLi[k].style.backgroundColor='#777';
						}
					}
				}
			}
		}
	</script>
  </head>
  
  <body>
    <div id="banner">
    	<ul id="ul"></ul>
    	<ol id="ol">
    		<li style="background:#f40;">1</li>
    		<li>2</li>
    		<li>3</li>
    		<li>4</li>
    	</ol>
    </div>
  </body>
</html>