JS原生轮播图
Posted ITandYT
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS原生轮播图相关的知识,希望对你有一定的参考价值。
哈喽!我的朋友们,最近有一个新项目。所以一直没更新!有没有想我啊!!
今天咱们来说一下JS原生轮播图!
话不多说:
直接来代码吧:下面是CSS部分:
1 *{ 2 padding: 0px; 3 margin: 0px; 4 } 5 img{ 6 width: 500px; 7 height: 300px; 8 } 9 li{ 10 float: left; 11 } 12 ul{ 13 width: 2000px; 14 list-style: none; 15 position: absolute; 16 } 17 div{ 18 width: 500px; 19 height: 300px; 20 /*溢出部分隐藏*/ 21 overflow: hidden; 22 margin: 60px auto; 23 position: relative; 24 }
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 //1、获取到ul 2 var ul = document.getElementsByTagName("ul")[0]; 3 var x = 0; 4 5 //id 用来关闭定时器的 6 var id = setInterval(abc,10); 7 8 function abc(){ 9 ul.style.left = x-- +"px"; 10 11 //如果到第三周图片了 12 if(x == -1500){ 13 x = 0;//把ul修改成第一张图片 14 ul.style.left = x+"px"; 15 } 16 if(x % 500 == 0){ //第一张图片进来 17 clearInterval(id); //关闭定时器 18 //开启定时器 隔半秒钟开启定时器 19 setTimeout(function(){ 20 //500毫秒之后开启定时器,继续执行 21 id = setInterval(abc,10); 22 },500);//setTimeout 延时执行 23 } 24 }
就是这么简单!你学会了吗??
以上是关于JS原生轮播图的主要内容,如果未能解决你的问题,请参考以下文章