JS原生轮播图的简单实现(推荐)
程序员文章站
2022-05-26 09:05:17
哈喽!我的朋友们,最近有一个新项目。所以一直没更新!有没有想我啊!!
今天咱们来说一下js原生轮播图!
话不多说:
直接来代码吧:下面是css部分:
*{...
哈喽!我的朋友们,最近有一个新项目。所以一直没更新!有没有想我啊!!
今天咱们来说一下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 延时执行 } }
就是这么简单!你学会了吗??
以上这篇js原生轮播图的简单实现(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
上一篇: Angular2实现自定义双向绑定属性
下一篇: 原生js实现简单的链式操作