3D輪播照片墻(附源碼)
<!DOCTYPE html>
<html lang="en" ondragstart="return false">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="Keywords" content="">
? ? <meta name="Description" content="">
? ? <title>3D旋轉(zhuǎn)照片墻</title>
? ? <style type="text/css">
? ? ? ? /* 去掉默認(rèn)效果 */
? ? ? ?
? ? ? ? * {
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? }
? ? ? ?
? ? ? ? body {
? ? ? ? ? ? height: 2000px;
? ? ? ? ? ? background: rgb(255, 255, 255);
? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? /* 取消選中 */
? ? ? ? ? ? user-select: none;
? ? ? ? }
? ? ? ?
? ? ? ? .perspective {
? ? ? ? ? ? /*子元素透視 場景深度*/
? ? ? ? ? ? perspective: 700px;
? ? ? ? }
? ? ? ?
? ? ? ? .wrap {
? ? ? ? ? ? /* 3d */
? ? ? ? ? ? width: 135px;
? ? ? ? ? ? height: 240px;
? ? ? ? ? ? margin: 100px auto;
? ? ? ? ? ? position: relative;
? ? ? ? ? ? /* border: 1px solid red; */
? ? ? ? ? ? transform: rotateX(-20deg) rotateY(0deg);
? ? ? ? ? ? transform-style: preserve-3d;
? ? ? ? }
? ? ? ?
? ? ? ? .wrap img {
? ? ? ? ? ? display: block;
? ? ? ? ? ? /* 絕對定位 */
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 100%;
? ? ? ? ? ? transform: rotateY(0deg) translateZ(0px);
? ? ? ? ? ? background: transparent;
? ? ? ? ? ? box-shadow: 0 0 4px #fff;
? ? ? ? ? ? border-radius: 5px;
? ? ? ? ? ? /* webkit */
? ? ? ? }
? ? ? ? /* 照片底座 */
? ? ? ?
? ? ? ? .wrap p {
? ? ? ? ? ? width: 1200px;
? ? ? ? ? ? height: 1200px;
? ? ? ? ? ? background: -webkit-radial-gradient(center center, 600px 600px, rgba(122, 122, 122, .5), rgba(0, 0, 0, 0));
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? border-radius: 50%;
? ? ? ? ? ? left: 50%;
? ? ? ? ? ? top: 100%;
? ? ? ? ? ? margin-left: -600px;
? ? ? ? ? ? margin-top: -600px;
? ? ? ? ? ? /* 沿著x軸按倒 */
? ? ? ? ? ? transform: rotateX(90deg);
? ? ? ? }
? ? </style>
</head>
<body>
? ? <!-- 盒子容器 -->
? ? <div class="perspective">
? ? ? ? <div class="wrap" id="imgwrap">
? ? ? ? ? ? <!-- 引入圖片值頁面 -->
? ? ? ? ? ? <img src="img/1.jpg" />
? ? ? ? ? ? <img src="img/2.jpg" />
? ? ? ? ? ? <img src="img/3.jpg" />
? ? ? ? ? ? <img src="img/4.jpg" />
? ? ? ? ? ? <img src="img/5.jpg" />
? ? ? ? ? ? <img src="img/6.jpg" />
? ? ? ? ? ? <img src="img/7.jpg" />
? ? ? ? ? ? <img src="img/8.jpg" />
? ? ? ? ? ? <img src="img/9.jpg" />
? ? ? ? ? ? <img src="img/10.jpg" />
? ? ? ? ? ? <img src="img/11.jpg" />
? ? ? ? ? ? <img src="img/12.jpg" />
? ? ? ? ? ? <img src="img/13.jpg" />
? ? ? ? ? ? <img src="img/14.jpg" />
? ? ? ? ? ? <img src="img/15.jpg" />
? ? ? ? ? ? <p></p>
? ? ? ? </div>
? ? </div>
? ? <!-- ?src="JS/photo.js" -->
? ? <script type="text/javascript">
? ? ? ? var oImg = document.getElementsByTagName("img")
? ? ? ? var len = oImg.length;
? ? ? ? console.log(len)
? ? ? ? var deg = 360 / len;
? ? ? ? var oWrap = document.getElementById("imgwrap");
? ? ? ? // var oWrap=document.querySelector('.wrap');
? ? ? ? //頁面加載完畢在執(zhí)行的代碼
? ? ? ? window.onload = function() {
? ? ? ? ? ? ? ? Array.prototype.forEach.call(oImg, function(ele, index, self) {
? ? ? ? ? ? ? ? ? ? // 旋轉(zhuǎn)并沿Z軸平移
? ? ? ? ? ? ? ? ? ? ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(350px)";
? ? ? ? ? ? ? ? ? ? //過渡時(shí)間1s
? ? ? ? ? ? ? ? ? ? ele.style.transition = "1s " + (len - index) * 0.1 + "s";
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }
? ? ? ? ? ? //翻動3D相冊
? ? ? ? var newX, newY, lastX, lastY, minusX, minusY, rotX = -20,
? ? ? ? ? ? rotY = 0;
? ? ? ? document.onmousedown = function(e) {
? ? ? ? ? ? // 點(diǎn)擊設(shè)置初值
? ? ? ? ? ? lastX = e.clientX;
? ? ? ? ? ? lastY = e.clientY;
? ? ? ? ? ? this.onmousemove = function(e) {
? ? ? ? ? ? ? ? newX = e.clientX;
? ? ? ? ? ? ? ? newY = e.clientY;
? ? ? ? ? ? ? ? minusX = newX - lastX;
? ? ? ? ? ? ? ? minusY = newY - lastY;
? ? ? ? ? ? ? ? rotX -= minusY * 0.2;
? ? ? ? ? ? ? ? rotY += minusX * 0.1;
? ? ? ? ? ? ? ? oWrap.style.transform = "rotateX(" + rotX + "deg) rotateY(" + rotY + "deg)";
? ? ? ? ? ? ? ? lastX = newX;
? ? ? ? ? ? ? ? lastY = newY;
? ? ? ? ? ? }
? ? ? ? ? ? this.onmouseup = function(e) {
? ? ? ? ? ? ? ? //鼠標(biāo)松開
? ? ? ? ? ? ? ? this.onmousemove = null; //清除鼠標(biāo)移動
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
</body>
</html>
