JS原生轮播图的简单实现(推荐)
编程学习 2021-07-04 18:32www.dzhlxh.cn编程入门
狼蚁网站SEO优化长沙网络推广就为大家带来一篇JS原生轮播图的简单实现(推荐)。长沙网络推广觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随长沙网络推广过来看看吧
哈喽！我的朋友们，最近有一个新项目。所以一直没更新！有没有想我啊！！
今天咱们来说一下JS原生轮播图！
话不多说：
直接来代码吧：狼蚁网站SEO优化是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原生轮播图的简单实现(推荐)就是长沙网络推广分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持狼蚁SEO。
上一篇：基于JS脚本语言的基础语法详解
下一篇：JS+HTML5实现图片在线预览功能