原生js实现3D轮播图

最新推荐文章于 2022-12-25 19:02:31 发布

原创

最新推荐文章于 2022-12-25 19:02:31 发布 · 2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#3D图片轮播

本文详细介绍了如何用原生JavaScript实现3D轮播图，包括功能需求分析、关键代码展示以及在实现过程中遇到的bug及其解决方案。通过理解坐标和层级关系，即使过程复杂，也能成功创建这一视觉效果。

3D轮播图是我做过复杂的图片轮播了，由于是利用坐标，层级之间的关系，所以实现起来原理比较简单但是bug巨多，在推推拖拖了好久后，下定决心重新整理成博客，与大家分享！

首先分析一下3D图片轮播的功能需求：

和其它图片轮播大体一致，无非就是点击按钮向左、右翻页，点击下方提示位置小点切换到小点表示对的位置页（我是真的不知道那个小点叫什么名字，大家将就着听吧）

上代码：

基本代码：

<!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>立体轮播图</title>
    <style>
        .block{
            position: relative;
            width: 900px;
            height: 370px;
            margin: 0 auto;
            overflow: hidden;
        }
        .imgae_div{
            position: relative;
            width: 900px;
            height: 300px;
        }
        .imgae_div>div{
            position: absolute;
            width: 400px;
            height: 200px;
            transition: all 1s linear;

        }
        .imgae_div img{
            width: 400px;
            height: 200px;
        }
        .imgae_div>div:nth-child(1){
            top: 150px;
            left: 250px;
            z-index: 6;
        }
        .imgae_div>div:nth-child(2){
            top: 100px;
            left: 0px;
            z-index: 5;
        }
        .imgae_div>div:nth-child(3){
            top: 50px;
            left: 0px;
            z-index: 4;
        }
        .imgae_div>div:nth-child(4){
            top: 0px;
            left: 250px;
            z-index: 3;
        }
        .imgae_div>div:nth-child(5){
            top: 50px;
            left: 500px;
            z-index: 4;
        }
        .imgae_div>div:nth-child(6){
            top: 100px;
            left: 500px;
            z-index: 5;
        }
        .btn{
            width: 900px;
            height: 40px;
            position: absolute;
            top: 155px;
            z-index: 999;
            overflo