站長資訊平臺

jquery 3d輪播圖制作方法 (實(shí)現(xiàn)旋轉(zhuǎn)輪播圖)

2018-11-01 來源：學(xué)做網(wǎng)站論壇

在很多的圖片網(wǎng)站上，全使用到3d輪播圖效果，可以不斷的實(shí)現(xiàn)旋轉(zhuǎn)輪播，非常大氣美觀。效果如圖： jquery 3d輪播圖制作方法

對于這樣一種高大上的3D旋轉(zhuǎn)輪播圖，做起來并不是想象的那么復(fù)雜。我們在自己建網(wǎng)站時(shí)，完全可以制作出這樣的效果。（如果你對建網(wǎng)站一點(diǎn)不了解，可以先學(xué)習(xí)一下零基礎(chǔ)建站教程。）

方法/步驟

制作3d輪播圖效果，需要使用JQUERY，所以我們必須在自己的網(wǎng)頁中引JQUERY；方法很簡單，只需要將以下的百度靜態(tài)庫提供的JQUERY代碼放到自己的網(wǎng)頁</head>標(biāo)簽上方即可。
```
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
```

除了JQUERY之外，還需要引入一個(gè)3d輪播圖插件JS。


<script type="text/javascript" src="http://www.jq22.com/demo/jquery3dlb201801292252/js/zturn.js"></script>

在<body>標(biāo)簽里放入以下的HTML代碼，用于顯示3D輪播圖圖片和文字。（代碼里的圖片和文字可以換成自己網(wǎng)站的）【如果對HTML不懂，可以學(xué)習(xí)一下html入門教程�！�


<div class="lb_gl">

            <div class="container">

                <h1 class="turn_3d">聽聽這些老前輩的分享，你會(huì)獲得信心</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">學(xué)員感言1</p>

                            <p class="say">明月幾時(shí)有</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">

                                    自我介紹是向別人展示你自我介紹好不好,甚至直接關(guān)系到你給別人的第一印象的好壞及以后自我介紹是向別人展示你自我介紹好不好

                                </div>

                            </div>

                        </li>



                        <li class="poster-item zturn-item">

                            <p class="xxgy">學(xué)員感言2</p>

                            <p class="say">明月幾時(shí)有</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">

                                    自我介紹是向別人展示你自我介紹好不好,甚至直接關(guān)系到你給別人的第一印象的好壞及以后自我介紹是向別人展示你自我介紹好不好

                                </div>

                            </div>

                        </li>



                        <li class="poster-item zturn-item">

                            <p class="xxgy">學(xué)員感言3</p>

                            <p class="say">明月幾時(shí)有</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">

                                    自我介紹是向別人展示你自我介紹好不好,甚至直接關(guān)系到你給別人的第一印象的好壞及以后自我介紹是向別人展示你自我介紹好不好

                                </div>

                            </div>

                        </li>



                        <li class="poster-item zturn-item" >

                            <p class="xxgy">學(xué)員感言4</p>

                            <p class="say">明月幾時(shí)有</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">

                                    自我介紹是向別人展示你自我介紹好不好,甚至直接關(guān)系到你給別人的第一印象的好壞及以后自我介紹是向別人展示你自我介紹好不好

                                </div>

                            </div>

                        </li>



                        <li class="poster-item zturn-item">

                            <p class="xxgy">學(xué)員感言</p>

                            <p class="say">明月幾時(shí)有</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">

                                    自我介紹是向別人展示你自我介紹好不好,甚至直接關(guān)系到你給別人的第一印象的好壞及以后自我介紹是向別人展示你自我介紹好不好

                                </div>

                            </div>

                        </li>

        <li class="poster-item  zturn-item">

                            <p class="xxgy">學(xué)員感言</p>

                            <p class="say">明月幾時(shí)有</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">

                                    自我介紹是向別人展示你自我介紹好不好,甚至直接關(guān)系到你給別人的第一印象的好壞及以后自我介紹是向別人展示你自我介紹好不好

                                </div>

                            </div>

                        </li>



        <li class="poster-item zturn-item">

                            <p class="xxgy">學(xué)員感言</p>

                            <p class="say">明月幾時(shí)有</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">

                                    自我介紹是向別人展示你自我介紹好不好,甚至直接關(guān)系到你給別人的第一印象的好壞及以后自我介紹是向別人展示你自我介紹好不好

                                </div>

                            </div>

                        </li>



        <li class="poster-item zturn-item">

                            <p class="xxgy">學(xué)員感言</p>

                            <p class="say">明月幾時(shí)有</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">

                                    自我介紹是向別人展示你自我介紹好不好,甚至直接關(guān)系到你給別人的第一印象的好壞及以后自我介紹是向別人展示你自我介紹好不好

                                </div>

                            </div>

                        </li>



        <li class="poster-item zturn-item">

                            <p class="xxgy">學(xué)員感言</p>

                            <p class="say">明月幾時(shí)有</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">

                                    自我介紹是向別人展示你自我介紹好不好,甚至直接關(guān)系到你給別人的第一印象的好壞及以后自我介紹是向別人展示你自我介紹好不好

                                </div>

                            </div>

                        </li>



        <li class="poster-item zturn-item">

                            <p class="xxgy">學(xué)員感言</p>

                            <p class="say">明月幾時(shí)有</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">

                                    自我介紹是向別人展示你自我介紹好不好,甚至直接關(guān)系到你給別人的第一印象的好壞及以后自我介紹是向別人展示你自我介紹好不好

                                </div>

                            </div>

                        </li>



        <li class="poster-item zturn-item">

                            <p class="xxgy">學(xué)員感言</p>

                            <p class="say">明月幾時(shí)有</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">

                                    自我介紹是向別人展示你自我介紹好不好,甚至直接關(guān)系到你給別人的第一印象的好壞及以后自我介紹是向別人展示你自我介紹好不好

                                </div>

                            </div>

                        </li>



                    </ul>



                </div>

        </div>



        </div>

在自己網(wǎng)頁的CSS文件里放入以下CSS樣式代碼，用于控制3D輪播圖的樣式�！救绻麑SS不了解，可以學(xué)習(xí)一下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;}

最后，還要在</body>標(biāo)簽的上方，放上以下的JS代碼，用于控制3D輪播圖的輪播速度及寬度值。


<script type="text/javascript">

                        var aa=new zturn({

                            id:"zturn",

                            opacity:0.9,

                            width:382,

                            Awidth:1024,

                            scale:0.9

                        })

</script>

通過以下的幾個(gè)步驟，我們就可以在自己做網(wǎng)站時(shí)，自己通過jquery制作出3d輪播圖了。

最后提供一下整個(gè)代碼的下載：https://pan.baidu.com/s/1wzY6j4twmvii68iWtE4Tow

標(biāo)簽： isp 代碼建網(wǎng)站建站建站教程

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。

上一篇:WordPress仿站時(shí)，多個(gè)CSS怎么處理

下一篇:mysql數(shù)據(jù)庫和mssql數(shù)據(jù)庫有什么區(qū)別

相關(guān)文章

最新資訊

熱門推薦

為學(xué)習(xí)和知識分享目的，本站文章部分自網(wǎng)絡(luò)，本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：2653426586@qq.com QQ：2653426586

如有其他需求，請聯(lián)系：2653426586@qq.com QQ：2653426586

友情鏈接：網(wǎng)絡(luò)安全運(yùn)維經(jīng)驗(yàn) IT技術(shù)分享運(yùn)維隨筆錄鮮花東郊到家往約到家

中文字幕在线观看,亚洲а∨天堂久久精品9966,亚洲成a人片在线观看你懂的,亚洲av成人片无码网站,亚洲国产精品无码久久久五月天

jquery 3d輪播圖制作方法 (實(shí)現(xiàn)旋轉(zhuǎn)輪播圖)

方法/步驟