首页 > 站长百科 > 建站经验

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

2018-11-01    来源：学做网站论坛

容器云强势上线！快速搭建集群，上万Linux镜像随意使用

在很多的图片网站上，全使用到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

标签： isp 代码 建网站 建站 建站教程

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。

上一篇:WordPress仿站时，多个CSS怎么处理

下一篇:mysql数据库和mssql数据库有什么区别

相关文章
最新资讯
热门推荐
热门标签
网站 seo 网络 网站优化 安全 百度 互联网 服务器 云计算 媒体 大数据 代码 外链建设 搜索 搜索优化 数据 淘宝 搜索引擎 百度百 通信 博 数据库 网站推广 金融 排名 Google 推广 谷歌 网站排名 关键词优化