零基础建站培训教程介绍

当前位置:

jquery 3d轮播图制作方法 (实现旋转轮播图)

在很多的图片网站上,全使用到3d轮播图效果,可以不断的实现旋转轮播,非常大气美观。效果如图:jquery 3d轮播图制作方法

对于这样一种高大上的3D旋转轮播图,做起来并不是想象的那么复杂。我们在自己建网站时,完全可以制作出这样的效果。(如果你对建网站一点不了解,可以先学习一下零基础建站教程。)

方法/步骤

  1. 制作3d轮播图效果,需要使用JQUERY,所以我们必须在自己的网页中引JQUERY;方法很简单,只需要将以下的百度静态库提供的JQUERY代码放到自己的网页</head>标签上方即可。
    
    
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  2. 除了JQUERY之外,还需要引入一个3d轮播图插件JS。
    
    
    <script type="text/javascript" src="http://www.jq22.com/demo/jquery3dlb201801292252/js/zturn.js"></script>
  3. 在<body>标签里放入以下的HTML代码,用于显示3D轮播图图片和文字。(代码里的图片和文字可以换成自己网站的)【如果对HTML不懂,可以学习一下html入门教程。】
    
    
    <div class="lb_gl">
                <div class="container">
                    <h1 class="turn_3d">听听这些老前辈的分享,你会获得信心</h1>
                    <div class="pictureSlider poster-main">
                        <div class="poster-btn poster-prev-btn"></div>
                        <ul id="zturn" class="poster-list">
                            <li class="poster-item  zturn-item" >
                                <p class="xxgy">学员感言1</p>
                                <p class="say">明月几时有</p>
                                <div class="for_btn">
                                    <img src="img/a1.png" width="100%">
                                    <a href="#" class="in_page"><img src="images/iconin.png" /></a>
                                </div>

                                <div class="students_star">
                                    <p class="cell_list"><span class="lf">姓名:<span class="darks">小明</span></span> <span class="rt">薪资 :<span class="darks">15k</span></span>
                                    </p>
                                    <p class="cell_list"><span>入职:<span class="darks">把酒问青天</span></span>
                                    </p>
                                    <div class="zwjs">
                                        自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好
                                    </div>
                                </div>
                            </li>

                            <li class="poster-item zturn-item">
                                <p class="xxgy">学员感言2</p>
                                <p class="say">明月几时有</p>
                                <div class="for_btn">
                                    <img src="img/a2.png" width="100%">
                                    <a href="#" class="in_page"><img src="images/iconin.png" /></a>
                                </div>
                                <div class="students_star">
                                    <p class="cell_list"><span class="lf">姓名:<span class="darks">小明</span></span> <span class="rt">薪资 :<span class="darks">15k</span></span>
                                    </p>
                                    <p class="cell_list"><span>入职:<span class="darks">把酒问青天</span></span>
                                    </p>
                                    <div class="zwjs">
                                        自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好
                                    </div>
                                </div>
                            </li>

                            <li class="poster-item zturn-item">
                                <p class="xxgy">学员感言3</p>
                                <p class="say">明月几时有</p>
                                <div class="for_btn">
                                    <img src="img/a3.png" width="100%">
                                    <a href="#" class="in_page"><img src="images/iconin.png" /></a>
                                </div>
                                <div class="students_star">
                                    <p class="cell_list"><span class="lf">姓名:<span class="darks">小明</span></span> <span class="rt">薪资 :<span class="darks">15k</span></span>
                                    </p>
                                    <p class="cell_list"><span>入职:<span class="darks">把酒问青天</span></span>
                                    </p>
                                    <div class="zwjs">
                                        自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好
                                    </div>
                                </div>
                            </li>

                            <li class="poster-item zturn-item" >
                                <p class="xxgy">学员感言4</p>
                                <p class="say">明月几时有</p>
                                <div class="for_btn">
                                    <img src="img/a4.png" width="100%">
                                    <a href="#" class="in_page"><img src="images/iconin.png" /></a>
                                </div>
                                <div class="students_star">
                                    <p class="cell_list"><span class="lf">姓名:<span class="darks">小明</span></span> <span class="rt">薪资 :<span class="darks">15k</span></span>
                                    </p>
                                    <p class="cell_list"><span>入职:<span class="darks">把酒问青天</span></span>
                                    </p>
                                    <div class="zwjs">
                                        自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好
                                    </div>
                                </div>
                            </li>

                            <li class="poster-item zturn-item">
                                <p class="xxgy">学员感言</p>
                                <p class="say">明月几时有</p>
                                <div class="for_btn">
                                    <img src="img/a5.png" width="100%">
                                    <a href="#" class="in_page"><img src="images/iconin.png" /></a>
                                </div>
                                <div class="students_star">
                                    <p class="cell_list"><span class="lf">姓名:<span class="darks">小明</span></span> <span class="rt">薪资 :<span class="darks">15k</span></span>
                                    </p>
                                    <p class="cell_list"><span>入职:<span class="darks">把酒问青天</span></span>
                                    </p>
                                    <div class="zwjs">
                                        自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好
                                    </div>
                                </div>
                            </li>
            <li class="poster-item  zturn-item">
                                <p class="xxgy">学员感言</p>
                                <p class="say">明月几时有</p>
                                <div class="for_btn">
                                    <img src="img/a1.png" width="100%">
                                    <a href="#" class="in_page"><img src="images/iconin.png" /></a>
                                </div>
                                <div class="students_star">
                                    <p class="cell_list"><span class="lf">姓名:<span class="darks">小明</span></span> <span class="rt">薪资 :<span class="darks">15k</span></span>
                                    </p>
                                    <p class="cell_list"><span>入职:<span class="darks">把酒问青天</span></span>
                                    </p>
                                    <div class="zwjs">
                                        自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好
                                    </div>
                                </div>
                            </li>

            <li class="poster-item zturn-item">
                                <p class="xxgy">学员感言</p>
                                <p class="say">明月几时有</p>
                                <div class="for_btn">
                                    <img src="img/a2.png" width="100%">
                                    <a href="#" class="in_page"><img src="images/iconin.png" /></a>
                                </div>
                                <div class="students_star">
                                    <p class="cell_list"><span class="lf">姓名:<span class="darks">小明</span></span> <span class="rt">薪资 :<span class="darks">15k</span></span>
                                    </p>
                                    <p class="cell_list"><span>入职:<span class="darks">把酒问青天</span></span>
                                    </p>
                                    <div class="zwjs">
                                        自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好
                                    </div>
                                </div>
                            </li>

            <li class="poster-item zturn-item">
                                <p class="xxgy">学员感言</p>
                                <p class="say">明月几时有</p>
                                <div class="for_btn">
                                    <img src="img/a3.png" width="100%">
                                    <a href="#" class="in_page"><img src="images/iconin.png" /></a>
                                </div>
                                <div class="students_star">
                                    <p class="cell_list"><span class="lf">姓名:<span class="darks">小明</span></span> <span class="rt">薪资 :<span class="darks">15k</span></span>
                                    </p>
                                    <p class="cell_list"><span>入职:<span class="darks">把酒问青天</span></span>
                                    </p>
                                    <div class="zwjs">
                                        自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好
                                    </div>
                                </div>
                            </li>

            <li class="poster-item zturn-item">
                                <p class="xxgy">学员感言</p>
                                <p class="say">明月几时有</p>
                                <div class="for_btn">
                                    <img src="img/a4.png" width="100%">
                                    <a href="#" class="in_page"><img src="images/iconin.png" /></a>
                                </div>
                                <div class="students_star">
                                    <p class="cell_list"><span class="lf">姓名:<span class="darks">小明</span></span> <span class="rt">薪资 :<span class="darks">15k</span></span>
                                    </p>
                                    <p class="cell_list"><span>入职:<span class="darks">把酒问青天</span></span>
                                    </p>
                                    <div class="zwjs">
                                        自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好
                                    </div>
                                </div>
                            </li>

            <li class="poster-item zturn-item">
                                <p class="xxgy">学员感言</p>
                                <p class="say">明月几时有</p>
                                <div class="for_btn">
                                    <img src="img/xueyuan.png" width="100%">
                                    <a href="#" class="in_page"><img src="images/iconin.png" /></a>
                                </div>
                                <div class="students_star">
                                    <p class="cell_list"><span class="lf">姓名:<span class="darks">小明</span></span> <span class="rt">薪资 :<span class="darks">15k</span></span>
                                    </p>
                                    <p class="cell_list"><span>入职:<span class="darks">把酒问青天</span></span>
                                    </p>
                                    <div class="zwjs">
                                        自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好
                                    </div>
                                </div>
                            </li>

            <li class="poster-item zturn-item">
                                <p class="xxgy">学员感言</p>
                                <p class="say">明月几时有</p>
                                <div class="for_btn">
                                    <img src="img/a5.png" width="100%">
                                    <a href="#" class="in_page"><img src="images/iconin.png" /></a>
                                </div>
                                <div class="students_star">
                                    <p class="cell_list"><span class="lf">姓名:<span class="darks">小明</span></span> <span class="rt">薪资 :<span class="darks">15k</span></span>
                                    </p>
                                    <p class="cell_list"><span>入职:<span class="darks">把酒问青天</span></span>
                                    </p>
                                    <div class="zwjs">
                                        自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好
                                    </div>
                                </div>
                            </li>

                        </ul>

                    </div>
            </div>

            </div>
  4. 在自己网页的CSS文件里放入以下CSS样式代码,用于控制3D轮播图的样式。【如果对CSS不了解,可以学习一下CSS视频教程
    
    
    /*轮播*/
    .lb_gl{margin-bottom: 30px;background: url(../images/bg_3d.png);background-size: 100% 100%;height:725px ;}
    .container{width: 1024px;margin:0 auto;position: relative;}
    .pictureSlider{height: 518px;margin-bottom: 24px;}
    .poster-item{background: #fff;height: 453px;width:336px;border-radius: 10px;padding:45px 23px 20px 23px;
        transition: all 0.5s;cursor: default;
        -moz-transition: all 0.5s;cursor: default;
        -webkit-transition: all 0.5s;cursor: default;
        -o-transition: all 0.5s;cursor: default;
    }
    .turn_3d{text-align: center;color: #fff;font-weight: 400;font-size: 36px;padding: 28px 0;}
    .xxgy{font-size: 30px;font-weight: 900;padding-left: 10px;}
    .poster-item .say{font-size: 18px;margin-bottom: 5px;padding-left: 10px;}
    .students_star{padding:10px 10px 0 10px ;}
    .cell_list{margin-bottom: 20px;color:#999;font-size: 18px;overflow: hidden;}
    .darks{color: #000;padding-left: 10px;}
    .zwjs{border-top:1px solid #d0cddb;line-height: 26px;padding-top: 5px;color: #999;font-size: 12px;max-height: 84px;overflow: hidden;}
    .for_btn{position: relative;height:214px;overflow:hidden}
    .in_page{position: absolute;left: 50%;top:50%;width:40px;height: 40px;margin-left: -20px;margin-top: -20px;}
    .in_page>img{width: 40px;height: 40px;}

    .check_more{width: 180px;height: 50px;line-height: 50px;text-align: center;color:#fff;background: #bc241d;margin:0 auto;display: block;}
  5. 最后,还要在</body>标签的上方,放上以下的JS代码,用于控制3D轮播图的轮播速度及宽度值。
    
    
    <script type="text/javascript">
                            var aa=new zturn({
                                id:"zturn",
                                opacity:0.9,
                                width:382,
                                Awidth:1024,
                                scale:0.9
                            })
    </script>

通过以下的几个步骤,我们就可以在自己做网站时,自己通过jquery制作出3d轮播图了。

最后提供一下整个代码的下载:https://pan.baidu.com/s/1wzY6j4twmvii68iWtE4Tow

发表评论

电子邮件地址不会被公开。 必填项已用*标注