网络编程
位置：首页>> 网络编程>> JavaScript>> JS原生轮播图的简单实现(推荐)

JS原生轮播图的简单实现(推荐)

作者：jingxian　　发布时间：2024-04-29 14:06:30　

标签：原生js,轮播图

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

今天咱们来说一下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="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>

接下来是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 延时执行
   }
  }

就是这么简单！你学会了吗？？

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com