小編給大家分享一下JS怎么實現(xiàn)原生輪播圖，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

專注于為中小企業(yè)提供成都網站建設、網站設計服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)永寧免費做網站提供優(yōu)質的服務。我們立足成都，凝聚了一批互聯(lián)網行業(yè)人才，有力地推動了1000+企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網站建設實現(xiàn)規(guī)模擴充和轉變。

CSS部分：

*{
    padding: 0px;
    margin: 0px;
   }
   img{
    width: 500px;
    height: 300px;
   }
   li{
    float: left;
   }
   ul{
    width: 2000px;
    list-style: none;
    position: absolute;
   }
   div{
    width: 500px;
    height: 300px;
    /*溢出部分隱藏*/
    overflow: hidden;
    margin: 60px auto;
    position: relative;
   }

HTML部分！

接下來是JS部分：

//1、獲取到ul
   var ul = document.getElementsByTagName("ul")[0];
   var x = 0;
   
   //id 用來關閉定時器的
   var id = setInterval(abc,10);
   
   function abc(){
    ul.style.left = x-- +"px";
    
    //如果到第三周圖片了
    if(x == -1500){
     x = 0;//把ul修改成第一張圖片
     ul.style.left = x+"px";
    }
    if(x % 500 == 0){ //第一張圖片進來
     clearInterval(id); //關閉定時器
     //開啟定時器 隔半秒鐘開啟定時器
     setTimeout(function(){
      //500毫秒之后開啟定時器，繼續(xù)執(zhí)行
      id = setInterval(abc,10);
     },500);//setTimeout 延時執(zhí)行
    }
   }

以上是“JS怎么實現(xiàn)原生輪播圖”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！