欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS原生輪播圖的簡(jiǎn)單實(shí)現(xiàn)(推薦)

 更新時(shí)間：2017年07月22日 08:59:29   投稿：jingxian  
下面小編就為大家?guī)?lái)一篇JS原生輪播圖的簡(jiǎn)單實(shí)現(xiàn)(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

哈嘍！我的朋友們，最近有一個(gè)新項(xiàng)目。所以一直沒(méi)更新！有沒(méi)有想我?。?！

今天咱們來(lái)說(shuō)一下JS原生輪播圖！

話不多說(shuō)：

直接來(lái)代碼吧：下面是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部分！

<div>
 <ul>
  <li><img src="img/1.jpg" /></li>
  <li><img src="img/2.jpg"/></li>
  <li><img src="img/3.jpg"/></li>
  <li><img src="img/1.jpg" /></li>
 </ul>
</div>

接下來(lái)是JS部分：

//1、獲取到ul
   var ul = document.getElementsByTagName("ul")[0];
   var x = 0;
   
   //id 用來(lái)關(guān)閉定時(shí)器的
   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){ //第一張圖片進(jìn)來(lái)
     clearInterval(id); //關(guān)閉定時(shí)器
     //開(kāi)啟定時(shí)器 隔半秒鐘開(kāi)啟定時(shí)器
     setTimeout(function(){
      //500毫秒之后開(kāi)啟定時(shí)器，繼續(xù)執(zhí)行
      id = setInterval(abc,10);
     },500);//setTimeout 延時(shí)執(zhí)行
    }
   }

就是這么簡(jiǎn)單！你學(xué)會(huì)了嗎？？

以上這篇JS原生輪播圖的簡(jiǎn)單實(shí)現(xiàn)(推薦)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論