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:60pxauto; position:relative; }
HTML部分!
接下来是JS部分:
//1、获取到ul varul=document.getElementsByTagName("ul")[0]; varx=0; //id用来关闭定时器的 varid=setInterval(abc,10); functionabc(){ 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原生轮播图的简单实现(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。