本文主要是介绍js-动态生成小圆点（根据轮播图图片张数动态生成小圆点），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
动态生成小圆点（根据轮播图图片张数动态生成小圆点）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>body,ul{padding: 0;margin: 0;}ul{list-style: none;}.lunbo{width: 730px;height: 454px;margin: 100px auto;overflow: hidden;position: relative;}.circle{position: absolute;left: 50%;margin-left: -50px;bottom: 10px; }.circle span{display: inline-block;width: 18px;height: 18px;background-color: #ccc;text-align: center;border-radius: 18px;cursor: pointer;margin-right:10px;}.circle span.current{background-color: yellow;}</style><script> window.onload = function(){function $(id){ return document.getElementById(id); }//动态生成轮播图小圆点var circle = document.createElement("div"); circle.setAttribute("class","circle");var lis = document.getElementsByTagName("li");for(var i=0; i<lis.length; i++){var span = document.createElement("span");span.innerHTML = i+1;circle.appendChild(span);}$("scroll").appendChild(circle);var spanChildren = circle.children;spanChildren[0].setAttribute("class","current");}</script>
</head>
<body><div class="lunbo" id="scroll"><ul id="ul"><li><img src="images/11.jpg" alt=""></li><li><img src="images/22.jpg" alt=""></li><li><img src="images/33.jpg" alt=""></li><li><img src="images/44.jpg" alt=""></li><li><img src="images/55.jpg" alt=""></li> <li><img src="images/66.jpg" alt=""></li></ul><!-- <div class="circle"><span>1</span><span class="current">2</span><span>3</span><span>4</span><span>5</span><span>6</span></div> --></div></body>
</html> 这篇关于js-动态生成小圆点（根据轮播图图片张数动态生成小圆点）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
