jQuery自適應-3D旋轉輪播圖

時間 2020-05-08

標籤 jquery 自適應 3d 旋轉欄目 JQuery 简体版

原文原文鏈接

3D旋轉輪播圖

本例源於（站長之家實例http://sc.chinaz.com/jiaoben/170215391070.htm）css

其餘類似示例（https://www.cnblogs.com/incredible-x/p/9688333.html）html

本身研究重寫了一遍。jquery

1、先寫靜態的初始樣式的css和html。我用的是 550x300的大小一致的 5張圖片，代碼可拓展爲三張、四張、甚至大於五張。如圖是靜態效果：數組

圖後的代碼是靜態時的樣式html和css。app

<!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>Document</title>
    <!-- jquery CDN -->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style> * { margin: 0; padding: 0;word-break: break-all; } a { color:#fff;text-decoration: none;} a:hover { text-decoration: none;} ul,li { list-style: none;} html,body{width: 100%;height: 100%;} .main {max-width: 800px; margin: 0 auto;} #slide {width: 100%;height: 420px;position: relative;overflow: hidden;} #slide .pic { position: absolute; } #slide .pic img {width: calc(100% - 14px);height: calc(100% - 14px);} #slide .p1 { z-index: 3;width: 40%;height: 40%;left: -50%;top: 30%;} #slide .p2 { z-index: 4;width: 60%;height: 60%;left: -20%;top: 20%;} #slide .p3 {z-index: 5; width: 80%;height: 80%; left: 10%;top: 10%;} #slide .p4 { z-index: 4; width: 60%; height: 60%; left: 60%; top: 20%;} #slide .p5 { z-index: 3; width: 40%;height: 40%; left: 110%; top: 30%;} #slide .btn { position: absolute; z-index: 6; bottom: 20%; width: 180px;  /* 計算得出 5*30+5*6=180 */ margin-left: -90px; left: 50%;
    } #slide .btn span { width: 24px; height: 8px; border-radius: 3px; float: left; background-color: #dedede; margin: 0 3px;
    } #slide .btn .on {background-color: #ffd200; }

    </style>
</head>

<body>
    <div class="main">
        <div id="slide" class="slide">
            <div class="pic"><img src="./images/1.png"></div>
            <div class="pic"><img src="./images/2.png"></div>
            <div class="pic"><img src="./images/3.png"></div>
            <div class="pic"><img src="./images/4.png"></div>
            <div class="pic"><img src="./images/5.png"></div>
            <div class="btn">
                <!-- <span data-minibtn-id='1'></span><span></span><span></span><span></span><span></span> -->
            </div>
        </div>
        <button class="btn-prev">向左</button>
        <button class="btn-next">向右</button>
    </div>
</body>
</html>

View Code

2、而後，js編寫動態交互效果。這段是js代碼（要引入jQuery庫）ide

備註還比較詳細，一和二的代碼直接複製就能夠運行。ui

<script>
    var slideNumber; //輪播圖片的數量
    var miniSlideBtn = true;         //miniSlideBtn=true爲開啓滾動按鈕
    var isableTouch = true;          //是否能夠觸摸滑動切換
    var isAutoPlay = true;          //是否能夠自動輪播

    //窗口大小改變時改變輪播圖寬高
    $(window).resize(function () { $(".slide").height($(".slide").width() * 0.56); }); $(function () { $("#slide").height($("#slide").width() * 0.56);  //調整輪播圖的高度
        slideNumber = $("#slide img").length;     //輪播圖數量
        for (let i = 0; i < slideNumber; i++) {         //給每一個div,而不是img,添加自定義屬性編號
            $("#slide .pic").eq(i).attr('data-img-id', i); } // 根據輪播圖片數量添加圖片位置對應的樣式 
        // 還有 if(slideNumber=1,=2,=3,=4,>5)
        if (slideNumber = 5) { for (let i = 0; i < slideNumber; i++) { $("#slide .pic").eq(i).addClass('p' + (i + 1)); } } //根據圖片數量設置輪播圖按鈕
        if (miniSlideBtn) { for (let i = 0; i < slideNumber; i++) { $("#slide .btn").append("<span data-minibtn-id=" + i + "></span>"); } $("#slide .btn").width(slideNumber * 34); $("#slide .btn").css('margin-left', '-' + slideNumber * 17 + 'px'); //調整margin-left 負值使按鈕居中
 } //自動切換
        if (isAutoPlay) { setInterval(() => { right(); }, 3000) } //觸摸切換
        if (isableTouch) { slideTouch(); } imgClickChange();//點擊圖片左右切換圖片
        currentBtn();//當前輪播按鈕的選中狀態
 }); $(".btn-prev").click(function () { //點擊按鈕翻上一頁
 left(); }) $(".btn-next").click(function () { //點擊按鈕翻下一頁
 right(); }) /*下一張圖片，右邊的圖向左走，注意:第一個變成最後一個，最後一個變成倒數第二個*/
    function right() { let temp = new Array(); for (let i = 0; i < slideNumber; i++) { temp[i] = $("#slide .pic[data-img-id=" + i + "]").attr('class'); //臨時數組獲取class是pic p1,pic p2,pic p3...
 } for (let i = 0; i < slideNumber; i++) { if (i == 0) {     //若是編號爲第一張圖片，它將變成最後一個
                $("#slide .pic[data-img-id=" + i + "]").attr('class', temp[slideNumber - 1]); } else { $("#slide .pic[data-img-id=" + i + "]").attr('class', temp[i - 1]); } } imgClickChange();//點擊圖片左右切換圖片
        currentBtn();//當前輪播按鈕的選中狀態
 } /*上一張圖片, 左邊的圖向右走，注意:最後一張會變成第一張，第一個圖變成第二個*/
    function left() { let temp = new Array(); for (let i = 0; i < slideNumber; i++) { temp[i] = $("#slide .pic[data-img-id=" + i + "]").attr('class'); //臨時數組獲取class pic p1,pic p2...
 } for (let i = 0; i < slideNumber; i++) { if (i == slideNumber - 1) {   //若是編號爲最後一張圖片，它將變成
                $("#slide .pic[data-img-id=" + i + "]").attr('class', temp[0]); } else { $("#slide .pic[data-img-id=" + i + "]").attr('class', temp[i + 1]); } } imgClickChange();//點擊圖片自己切換圖片
        currentBtn();//當前輪播按鈕的選中狀態
 } /*點擊圖片左右切換圖片*/
    function imgClickChange() { // $("#slide .p2").click(function(){ prevImg();});//爲何這種寫法無效
        // $("#slide .p4").click(function(){ nextImg();});//爲何這種寫法無效
        $('#slide .pic').removeAttr('onclick'); $("#slide .p2").attr('onclick', 'left()'); $("#slide .p4").attr('onclick', 'right()'); } /*當前輪播按鈕的選中狀態*/
    function currentBtn() { var cur = parseInt($("#slide .p3").attr('data-img-id'));//取.p3的當前img-id
        $("#slide .btn span").removeClass('on'); $("#slide .btn span[data-minibtn-id=" + cur + "]").addClass('on'); } /* jquery寫法 slideTouch(),觸摸滑動切換 */
    /* function slideTouch() { let _start = 0, _end = 0; $("#slide").on('touchstart', (e) => { _start = e.originalEvent.targetTouches[0].pageX; }); $('#slidd').on('touchmove', (e) => { // _end = (_start - e.originalEvent.targetTouches[0].pageX); _end = e.originalEvent.targetTouches[0].pageX; }); $('#slide').on('touchend', (e) => { if ((_start - _end) < -100) { //【起點-終點】的絕對值 >100,故 x<-100 & x>100 left(); _end = 0; } else if ((_start - _end) > 100) { right(); _end = 0; } }); }*/


    /* js原生寫法 slideTouch(),做用徹底同上,觸摸滑動切換 */
    function slideTouch() { let _start = 0, _end = 0, _ele = document.getElementById('slide'); _ele.addEventListener('touchstart', touchStart, false); _ele.addEventListener('touchmove', touchMove, false); _ele.addEventListener('touchend', touchEnd, false); function touchStart(e) { _start = e.targetTouches[0].pageX; } function touchMove(e) { _end = e.targetTouches[0].pageX; } function touchEnd(e) { if ((_start - _end) < -100) {   //【起點-終點】的絕對值 >100,故 x<-100 & x>100
 left(); _end = 0; } else if ((_start - _end) > 100) { right(); _end = 0; } } } </script>