JS原生轮播图的简单实现(推荐)
作者:jingxian 时间:2024-04-29 14:06:30
哈喽!我的朋友们,最近有一个新项目。所以一直没更新!有没有想我啊!!
今天咱们来说一下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,轮播图
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
python list 查询是否存在并且并返回下标的操作
2023-06-20 12:05:43
![](https://img.aspxhome.com/file/2023/5/84105_0s.jpg)
Python使用requests发送POST请求实例代码
2022-10-26 07:40:00
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2022-04-27 00:26:39
![](https://img.aspxhome.com/file/2023/4/86564_0s.jpg)
Bootstrap实现圆角、圆形头像和响应式图片
2023-08-12 07:16:59
![](https://img.aspxhome.com/file/2023/2/56052_0s.jpg)
微软证实最新的关键SQL Server漏洞
2008-12-23 13:31:00
oracle学习笔记(三)
2012-01-05 19:28:42
Go语言实战学习之流程控制详解
2024-05-09 14:57:06
![](https://img.aspxhome.com/file/2023/8/127068_0s.png)
Python绘制百分比堆叠柱状图并填充图案
2023-01-25 00:49:06
![](https://img.aspxhome.com/file/2023/5/67265_0s.jpg)
Sun正式发布MySQL 5.1版 简化数据库应用
2008-12-11 15:15:00
python爬虫获取百度首页内容教学
2022-12-16 07:02:00
![](https://img.aspxhome.com/file/2023/2/65422_0s.png)
NaviCat连接时提示"不支持远程连接的MySql数据库"解决方法
2024-01-24 17:03:54
![](https://img.aspxhome.com/file/2023/9/71109_0s.jpg)
pip search报错问题及解决
2022-12-20 23:33:12
![](https://img.aspxhome.com/file/2023/5/134815_0s.png)
Python实现优先级队列结构的方法详解
2022-06-15 20:59:33
Python基于动态规划算法解决01背包问题实例
2021-01-10 21:22:26
![](https://img.aspxhome.com/file/2023/2/104882_0s.jpg)
mysql-8.0.15-winx64 使用zip包进行安装及服务启动后立即关闭问题
2024-01-23 05:58:37
![](https://img.aspxhome.com/file/2023/9/108869_0s.jpg)
flask+layui+echarts实现前端动态图展示数据效果
2023-06-24 15:41:55
![](https://img.aspxhome.com/file/2023/9/131919_0s.jpg)
Python 正则表达式实现计算器功能
2023-09-02 02:01:44
![](https://img.aspxhome.com/file/2023/1/93511_0s.png)
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
2024-04-22 13:24:54
![](https://img.aspxhome.com/file/2023/0/135700_0s.png)
python使用ddt过程中遇到的问题及解决方案【推荐】
2021-08-25 09:20:44
![](https://img.aspxhome.com/file/2023/7/112967_0s.jpg)
Web2.0 的视觉设计
2007-10-24 20:12:00
![](https://img.aspxhome.com/file/UploadPic/200710/24/20071024223710131s.jpg)