富贵资源网 Design By www.hznty.com

哈喽!我的朋友们,最近有一个新项目。所以一直没更新!有没有想我啊!!

今天咱们来说一下JS原生轮播图!

话不多说:

直接来代码吧:下面是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="/UploadFiles/2021-04-02/1.jpg">

接下来是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毫秒之后开启定时器,继续执行
      id = setInterval(abc,10);
     },500);//setTimeout 延时执行
    }
   }

就是这么简单!你学会了吗??

以上这篇JS原生轮播图的简单实现(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com