原生JS实现跑马灯效果

作者：前端工程师_钱成时间：2024-04-19 09:53:11　

效果如下：（动态效果可复制代码查看，案例中的图片可自行选择添加）

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
list-style: none;
}
div{
position: relative;
width: 800px;
height: 200px;
border: 5px solid lightgreen;
margin:10px auto;
overflow: hidden;
}
div ul{
position: absolute;
left:0;
top:0;
}
div ul li{
width: 200px;
height: 200px;
float: left;
}
div ul li img{
width:100％;
height: 100％;
}
</style>
</head>
<body>
<div id="div1">
<ul>
<li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=b4251f00ef925cba01ed49ca117e14a7" alt=""/></li>
<li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=d38403825519770211acbf49459ae7d7" alt=""/></li>
<li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=53c83d39c62af65db998f4945bacaec2" alt=""/></li>
<li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=5509f1a642644b40c8aa98c9e2c77a83" alt=""/></li>
</ul>
</div>
<script>
var oUl=document.getElementsByTagName('ul')[0];
var lis=oUl.getElementsByTagName('li');
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=lis.length*lis[0].offsetWidth+'px';
var left=null;
var timer=setInterval(function(){
left-=3;
if(left<-oUl.offsetWidth/2){
left=0;
}
oUl.style.left=left+'px'
},10)
</script>
</body>
</html>

来源：http://www.qdfuns.com/notes/40901/affe7f52585df77350e24e08bc6fb2a2.html

标签：js,跑马灯

投稿

原生JS实现跑马灯效果

猜你喜欢

python3实现微型的web服务器

pyqt5中动画的使用详解

网页代码中键盘操作相关标签教程

Python数据库编程之pymysql详解

python队列queue模块详解

使用python统计文件行数示例分享

php实现表单多按钮提交action的处理方法

windows 7安装ORACLE 10g客户端的方法分享

.NET中获取程序根目录的常用方法介绍

Java实现学生信息管理系统(使用数据库)

Centos中彻底删除Mysql（rpm、yum安装的情况）

Python+Flask编写一个简单的行人检测API

Pandas中DataFrame的常用用法分享

使用virtualenv创建Python环境及PyQT5环境配置的方法

Mysql DateTime 查询问题解析

Vue 实现轮播图功能的示例代码

python内置函数sorted()用法深入分析

MySQL InnoDB 二级索引的排序示例详解

一文教你如何使用Python绘制瀑布图

定格动画浅析（一）