js 动态生成小圆点

最新推荐文章于 2023-07-14 10:39:18 发布

qq_37137999

最新推荐文章于 2023-07-14 10:39:18 发布

阅读量1.6k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/qq_37137999/article/details/80650389

版权

JS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动态生成小圆点</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 100px;
				height: 100px;
				overflow: hidden;
				margin: 300px 50%;
				position: relative;
				border: 1px solid #5EFF5E;
			}
			div img{
				display: inline-block;
				width: 100px;
				height: 100px;
				
			}
			div ul{
				position: absolute;
				bottom: 10px;
				line-height: 5px;
				width: 100px;
				height: 5px;
				text-align: center;
			}
			div ul li{
				width: 5px;
				height: 5px;
				border-radius: 10px;
				background-color: #5EFF5E;
				display: inline-block;
				margin: 2px;
				text-align: center;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var box = document.getElementById("box");
				var ul = document.getElementById("ul");
				var img = document.getElementsByTagName("img");
				
				for(var i=0; i<img.length; i++){
					var li = document.createElement("li");
					ul.appendChild(li);
				}
			}
		</script>
	</head>
	<body>
		<div id="box">
			<img src="../images/03.jpg"/>
			<img src="../images/03.jpg"/>
			<img src="../images/03.jpg"/>
			<img src="../images/03.jpg"/>
			<ul id="ul">
				
			</ul>
		</div>
	</body>
</html>

效果：

qq_37137999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 动态生成小圆点

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;动态生成小圆点&lt;/title&gt; &lt;style type="text/css"&gt; *{ margin: 0; paddin
复制链接

扫一扫