1.实现的第一步，就是先写html，然后css，其中在写css时用到了c3中的变形，包括旋转变形transform:rotateZ(deg)和位移变形transform:translateZ(位移）和transform:translateX(位移）
2.实现的第二步，就是写jquery了，为了防止点击过快造成的样式混乱，我们给他上了一个“锁”，思路就是改变要发生滚动元素的样式
3.效果图：
话不多说，直接上码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>3D焦点图</title></head><body> <div class="content"> <div class="wrapper"> <ul class="carousel"> <li class="left2"><img src="./images/50/1.jpg" alt=""></li> <li class="left1"><img src="./images/50/2.jpg" alt=""></li> <li class="king"><img src="./images/50/3.jpg" alt=""></li> <li class="right1"><img src="./images/50/4.jpg" alt=""></li> <li class="right2"><img src="./images/50/5.jpg" alt=""></li> <li class="xb"><img src="./images/50/6.jpg" alt=""></li> <li class="xb"><img src="./images/50/7.jpg" alt=""></li> <li class="xb"><img src="./images/50/8.jpg" alt=""></li> <li class="xb"><img src="./images/50/9.jpg" alt=""></li> </ul> </div> <span class="prev"><</span> <span class="next">></span>
</div>
</body><style> /* reset */ *{ margin: 0; padding: 0; }
ul li{ list-style: none } ::selection{ background:rgba(250, 245, 245, 0); } img{ display: block }/*样式*/.content{ position: relative; width: 500px; margin: 100px auto 0;
} .wrapper{ width: 500px; height: 280px; position: relative; perspective: 500px; } .carousel{ width: 500px; height: 280px; } .carousel li{ width: 500px; height: 280px; position: absolute; left: 0; top: 0; transition: all 1s ease 0s;
} /* king */ .king{ transform: translateZ(-50px); /* 位移变形，向里移动 */ z-index: 100; }
/* left1 */
.left1{ transform: translateX(-100px)rotateY(30deg) translateZ(-150px) ; z-index: 90; } /* left2 */ .left2{ transform: translateX(-200px) rotateY(40deg) translateZ(-300px); z-index: 80; }
/* right1 */ .right1{ transform: translateX(100px) rotateY(-30deg) translateZ(-150px); z-index: 90; } /* right2 */ .right2{ transform: translateX(200px) rotateY(-40deg) translateZ(-300px); z-index: 80; } .xb{ transform: translateZ(-200px) } .content span{ display: block; width: 50px; height: 50px; line-height: 50px; border-radius:50%; /* border: 1px solid yellow; */ background-color: rgba(99, 240, 6, 0.5); color: #fff; font-size: 32px; font-weight: 600; text-align: center; cursor: pointer;
} .prev{ position: absolute; left: 0; top: 140px; } .next{ position: absolute; right: 0; top: 140px; }
</style><script src="./node_modules/jquery/dist/jquery.js"></script><script> $(function () { let classes = ['left2', 'left1', 'king', 'right1', 'right2', 'xb', 'xb', 'xb', 'xb'] let lock = false; //上一张 $(".prev").click(function(){ if(lock == false){ lock = true; var first_class = classes.shift(); classes.push(first_class) let li = [...$("li")] for (let i = 0; i < li.length; i++) { li[i].className = classes[i]; } setTimeout(function () { lock = false; }, 1000)
}
})
// //下一张 // //应该让right1的样式变成King的样式 $(".next").click(function () { if(lock == false) { lock = true let last_class = classes.pop(); classes.unshift(last_class); let li =[... $("li")] for (let i = 0; i < li.length; i++) { li[i].className = classes[i]; } setTimeout(function () { lock = false; }, 1000) } }) })
</script></html>