简单的滚动图片跑马灯

最新推荐文章于 2022-10-12 16:56:54 发布

haojie5

最新推荐文章于 2022-10-12 16:56:54 发布

阅读量3.8k

点赞数

分类专栏：学习笔记文章标签： border function div

本文链接：https://blog.csdn.net/haojie5/article/details/8101004

版权

学习笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>滚动图片</title>
		<style type="text/css">
			body, div {
				border: 0;
				margin: 0;
				padding: 0;
			}
			#outer {
				overflow: hidden;
				width: 400px;
				height: 200px;
			}
			#inner {
				height: 200px;
				width: 1800px;
			}
		</style>
	</head>
	<body>
		<div id="outer">
			<div id="inner">
				<img src="images/a.jpg">
				<img src="images/b.jpg">
				<img src="images/c.jpg">
				<img src="images/d.jpg">
				<img src="images/e.jpg">
				<img src="images/f.jpg">
			</div>
		</div>
		<a href="#" οnclick="prev()">prev</a>
		<a href="#" οnclick="next()">next</a>
	</body>
	<script type="text/javascript">
		function next(){
			document.getElementById("outer").scrollLeft+=200;
		}
		function prev(){
			document.getElementById("outer").scrollLeft-=200;
		}
	</script>
</html>

haojie5

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
简单的滚动图片跑马灯

滚动图片 body, div { border: 0; margin: 0; padding: 0; } #outer { overflow: hidden; width: 400px; height: 200px; } #inner { height: 200px; width: 1800px;
复制链接

扫一扫

专栏目录