js無縫滾動實現及原理詳解

時間 2021-08-12

標籤 javascript css html java app ide 函數動畫 htm 對象欄目 JavaScript 简体版

原文原文鏈接

js無縫滾動實現及原理詳解javascript

【案例分析】css

①點擊左(右)按鈕一次，就讓圖片滾動一次html

②聲明一個變量i,java

每點擊一次右側按鈕，自增1，讓這個變量*圖片的寬度，即爲ul移動的距離app

每點擊一次左側按鈕，自減1，讓這個變量*圖片的寬度，即爲ul移動的距離ide

③圖片無縫滾動原理函數

將ul中第一張圖片所在的li複製一份，放到ul的最後面。須要強調移動是ul不是li，實現以下:動畫

a.，當圖片滾動到克隆的最後一張圖片時，此時再點擊右側按鈕，讓ul快速的、不作動畫的跳到最左側（第一張圖片處）：left:0+'px';htm

b.同理，當圖片滾動到第一張圖片時，此時再點擊左側按鈕，讓ul快速的、不作動畫的跳到最右側（克隆的最後一張圖片處）：對象

left: -img_width * (ul.children.length - 1)+'px';

c.同時，將變量i重置爲初始值0，這就能夠重新開始滾動圖片了

【應用知識點】

一、animate動畫函數，將animate動畫函數所在annimate.js文件引入

注意：可見使用動畫函數的前提，該元素必須有定位，由於添加了定位的元素才能使用element.style.left

二、克隆節點。cloneNode()加true深克隆，複製裏面的子節點，false或省略爲淺克隆

三、添加節點appenChild()

四、element.offsetWidth返回自身包括padding、邊框、內容區的寬度，返回數值不帶單位。

注意：offsetWidth爲只讀屬性，只能獲取不能賦值。

五、給elemt.style.left賦值時末尾註意＋‘px’

html代碼：

<body>
    <div class="banner">
        <ul>
            <li><img src="images/1.jpg" alt=""></li>
            <li><img src="images/2.jpg" alt=""></li>
            <li><img src="images/3.jpg" alt=""></li>
            <li><img src="images/4.jpg" alt=""></li>

        </ul>
        <!-- 右側按鈕 -->
        <div class="forward">
            <a href="javascript:;">》</a>
        </div>
        <!-- 左側按鈕 -->
        <div class="back">
            <a href="javascript:;">《</a>
        </div>
    </div>
</body>

css代碼：

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    a {
        text-decoration: none;
        color: #000000;
        font-size: 24px;
    }
    
    .banner {
        position: relative;
        width: 1024px;
        height: 688px;
        margin: 100px auto;
        overflow: hidden;
    }
    
    .banner ul {
        position: relative;
        width: 6000px;
        height: 688px;
        background-color: darkslategray;
    }
    
    li {
        float: left;
        width: 1024px;
        height: 688px;
        overflow: hidden;
        list-style: none;
        background-color: chocolate;
    }
    
    .forward {
        position: absolute;
        right: 0;
        top: 340px;
    }
    
    .back {
        position: absolute;
        left: 0;
        top: 340px;
    }
</style>

js代碼：

<script>
    //一、獲取元素對象
    var forward = document.querySelector('.forward');
    var back = document.querySelector('.back');
    var ul = document.querySelector('.banner').querySelector('ul');
    var firstli = ul.children[0];
    //二、把ul第一個li複製一份，放到ul的最後面
    var firstli_clone = firstli.cloneNode(true);
    ul.appendChild(firstli_clone)
    console.log(firstli);
    //三、聲明一個變量i
    var i = 0;
    //圖片的寬度(=包含圖片小li的寬度)
    var img_width = document.querySelector('.banner').querySelector('li').offsetWidth;
    //四、右側按鈕
    forward.addEventListener('click', function() {
        if (i == ul.children.length - 1) {
            ul.style.left = 0 + 'px';
            i = 0;
        }
        i++;
        // diaplacement表ul須要移動的距離
        var diaplacement = -img_width * i;
        animate(ul, diaplacement);
    });
    //五、左側按鈕
    back.addEventListener('click', function() {
        if (i == 0) {
            ul.style.left = -img_width * (ul.children.length - 1) + 'px';
            i = ul.children.length - 1;
        }
        i--;
        // diaplacement表ul須要移動的距離
        var diaplacement = -img_width * i;
        animate(ul, diaplacement);
    });
</script>

效果：