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原生轮播图的简单实现(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
热门推荐
10 要庆祝生日祝福语简短
11 分别祝福语简短情话英文
12 元旦祝福语同学简短创意
13 霸气新年祝福语大全简短
14 简短的几句新年祝福语
15 关于出国留学祝福语简短
16 中秋祝福语简短有深度
17 盘锦结婚祝福语大全简短
18 苦行老师祝福语结婚简短