溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

原生Js如何實(shí)現(xiàn)簡(jiǎn)單無(wú)縫滾動(dòng)輪播圖

發(fā)布時(shí)間：2021-05-11 14:08:17 來(lái)源：億速云 閱讀：167 作者：小新 欄目：開(kāi)發(fā)技術(shù)

這篇文章給大家分享的是有關(guān)原生Js如何實(shí)現(xiàn)簡(jiǎn)單無(wú)縫滾動(dòng)輪播圖的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

原簡(jiǎn)單的滾動(dòng)輪播代碼

<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .scroll{
            position: relative;
            width: 830px;/*展示寬度 展示4個(gè)圖+3個(gè)邊框=830*/
            height: 130px;
            border: 10px solid rgb(15, 15, 15);
            margin: 100px auto;
            overflow: hidden;
        }
        .scroll ul{
            position: absolute;
            width: 5000px;/*ul能存下所有l(wèi)i的寬*/
            height: 130px;
            top: 0;
            left: 0;
        }
        .scroll ul li{
            float: left;
            width: 200px;
            height: 130px;
            margin-right: 10px;
            overflow: hidden;
        }

    </style>
</head>
<body>
    <div id="scroll" class="scroll">
        <ul id="munit">
            <li><img src="../BOM/shuzi/3.png" alt=""></li>
            <li><img src="../BOM/shuzi/4.png" alt=""></li>
            <li><img src="../BOM/shuzi/5.png" alt=""></li>
            <li><img src="../BOM/shuzi/6.png" alt=""></li>
            <li><img src="../BOM/shuzi/7.png" alt=""></li>
            <li><img src="../BOM/shuzi/8.png" alt=""></li>
            <li><img src="../BOM/shuzi/9.png" alt=""></li>

            <li><img src="../BOM/shuzi/3.png" alt=""></li>
            <li><img src="../BOM/shuzi/4.png" alt=""></li>
            <li><img src="../BOM/shuzi/5.png" alt=""></li>
            <li><img src="../BOM/shuzi/6.png" alt=""></li>
            <li><img src="../BOM/shuzi/7.png" alt=""></li>
            <li><img src="../BOM/shuzi/8.png" alt=""></li>
            <li><img src="../BOM/shuzi/9.png" alt=""></li>
        </ul>
    </div>

    <script>
        //獲取元素
        var scroll = document.getElementById("scroll");
        var munit = document.getElementById("munit");
        var li = munit.children;
        // 進(jìn)行滾動(dòng)
        var nowLeft = 0;
        //要找到ul元素運(yùn)動(dòng)的折返點(diǎn)
        var back = -1470;//圖和邊框是li的寬度，展示的有4張圖，所以折返點(diǎn)就是1260
        //定時(shí)器
        var timer = setInterval(run,20);

        // 鼠標(biāo)移上scroll停止
        scroll.onmouseover = function(){
            clearInterval(timer);
        }
        // 移開(kāi)輪播
        scroll.onmouseout = function(){
            timer = setInterval(run,20);
        }

        //運(yùn)動(dòng)函數(shù)
        function run(){
            nowLeft -= 2;
            //判斷是否走到了折返點(diǎn)，走到了，則瞬間切換到0位置
            if(nowLeft <= back){
                nowLeft = 0;
            }
            munit.style.left = nowLeft + "px";
        }

       
    </script>
</body>
</html>

? ?在<div id="scroll">結(jié)構(gòu)給ul新增的一個(gè)父級(jí)div，這樣之后添加圖片，后期通過(guò)獲取ul寬度就可以了計(jì)算折算點(diǎn)
? ?1、折返點(diǎn)計(jì)算需要通過(guò)Js自動(dòng)計(jì)算
? ?var back = -munit.offsetWidth;//元素左移，值為負(fù)數(shù)
? ?2、自動(dòng)生成另一組對(duì)應(yīng)的圖片結(jié)構(gòu) li
? ?munit.innerHTML = munit.innerHTML + munit.innerHTML;//這樣就會(huì)增加一組li標(biāo)簽，后期增加圖片也會(huì)隨之增加
修改部分代碼，

css改寫(xiě)部分：
  /*給ul新增的一個(gè)父級(jí)div，這樣添加圖片后期獲取ul寬度 就可以了 */
        .scroll .inner{
            position: relative;
            width: 5000px;
        }
        .scroll ul{
            position: absolute;
            height: 130px;
            top: 0;
            left: 0;
            list-style: none;


body改寫(xiě)部分：      
<body>
    <div id="scroll" class="scroll">
       <div class="inner">
           <ul id="munit">
              <li><img src="../BOM/shuzi/3.png" alt=""></li>
              <li><img src="../BOM/shuzi/4.png" alt=""></li>
              <li><img src="../BOM/shuzi/5.png" alt=""></li>
              <li><img src="../BOM/shuzi/6.png" alt=""></li>
              <li><img src="../BOM/shuzi/7.png" alt=""></li>
              <li><img src="../BOM/shuzi/8.png" alt=""></li>
              <li><img src="../BOM/shuzi/9.png" alt=""></li>
              <li><img src="../BOM/shuzi/10.png" alt=""></li>
          </ul>
       </div>
    </div>

JS改寫(xiě)部分：
<script>
        //獲取元素
        var scroll = document.getElementById("scroll");
        var munit = document.getElementById("munit");

        //改寫(xiě)部分
        //1 折返點(diǎn)計(jì)算需要通過(guò)Js自動(dòng)計(jì)算
        var back = -munit.offsetWidth;//元素左移，值為負(fù)數(shù)
        //2 自動(dòng)生成另一組對(duì)應(yīng)的圖片結(jié)構(gòu) li
        munit.innerHTML = munit.innerHTML + munit.innerHTML;
        // 進(jìn)行滾動(dòng)


        var nowLeft = 0;
        //定時(shí)器
        var timer = setInterval(run,20);

        // 鼠標(biāo)移上scroll停止
        scroll.onmouseover = function(){
            clearInterval(timer);
        }
        // 移開(kāi)輪播
        scroll.onmouseout = function(){
            timer = setInterval(run,20);
        }

        //運(yùn)動(dòng)函數(shù)
        function run(){
            nowLeft -= 1;
            //判斷是否走到了折返點(diǎn)，走到了，則瞬間切換到0位置
            if(nowLeft <= back){
                nowLeft = 0;
            }
            munit.style.left = nowLeft + "px";
        }

    </script>
</body>
</html>

這樣的代碼耦合性低，也適合任意個(gè)數(shù)的li、任意大小的圖片的加入

感謝各位的閱讀！關(guān)于“原生Js如何實(shí)現(xiàn)簡(jiǎn)單無(wú)縫滾動(dòng)輪播圖”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI
助
手