零基础学做网站培训介绍

当前位置:

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

相关阅读:

如何去除网站轮播图(SWF文件)的边框

jQuery网站通栏banner轮播图切换代码

Ecshop电子商城轮播图设置方法

发表评论

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

相关教程

  • 有些做图片网站的学员咨询怎么给自己的图片网站添加灯箱展播效果,就是当用于打开自己做的网站内容里的第一张图片后就会自动出现前台的切换按钮,可以
  • 使用WordPress做网站时,制作banner轮播图也是最简单,下面学做网站论坛一下制作banner轮播图的通用方法。方法/步骤下载导航下拉菜单jquery特效基
  • 这是一款全屏高宽度上下切换式Banner轮播图,适用于任意网站制作,兼容性强。整体看起来大气上档次,并且带有手动上下点击切换的功能,可以让用户根据
  • Ecshop电子商城轮播图设置方法,下面就为大家讲解下Ecshop电子商城轮播图设置方法。在ecshop网站的首页有轮播的焦点大图。ecshop焦点图(轮播图/幻灯
  • 这是一款带全屏轮播图的家居企业网站Wordpress主题,整体布局美观大气,后台带有各类信息设置功能。可用于制作家居,家具网站等。主题使用方法支持
  • 企业网站顶部轮播图是采用JS调用的方法来显示的,我们要修改顶部轮播图,可以直接修改JS文件。在轮播图文件里找到如下图的代码,找到图片所在的路径
  • 代码介绍我们在做网站时,经常需要制作轮播图,可以在自己的网站上进行图片的轮播切换。今天给大家介绍一种jquery自动全屏轮播图banner,先让我们看
  • 在学做网站论坛之前的建站教程,介绍过很多网站轮播切换图幻灯片制作方法,今天再给广大学做网站学员介绍一种网站通栏banner轮播图。适宜各类网站使用
  • 提供一款jQuery左右无缝轮播图代码,特别适合新手建网站使用。可用于各类网站制作banner轮播图,尺寸可以根据自己网站进行修改。jQuery左右无缝轮播
  • 这是一款jquery图片轮播图,适合新手学做网站学员使用,只要按照以下的方法操作,就可以将一款好看的jquery图片轮播图放到自己做的网站上了。先看下