轮播图动态生成小圆点

效果图展示
直接上代码

效果图展示

序号是倒序（个人练习使用） 不需要删除即可

直接上代码

// An highlighted block
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}ul li{list-style: none;}.box{width: 760px;height: 454px;margin: 100px auto;overflow: hidden;position: relative;}.circle{position: absolute;left: 50%;margin-left:-90px;bottom: 10px;}.circle span{float: left;width: 18px;height: 18px;background-color: #fff;border-radius: 50%;text-align: center;line-height: 18px;margin-right:10px;cursor: pointer;}.circle span.current{background-color: orange;}</style><script>window.onload=function(){var scroll=document.getElementById("scroll");var ul=document.getElementById("ul");var circle=document.createElement("div");circle.setAttribute("class","circle");scroll.appendChild(circle);var lis=ul.children;var god=circle.children;for(var i=0;i<lis.length;i++){var span=document.createElement("span");
//                circle.appendChild(span);if(god.length==0){circle.appendChild(span)}else{circle.insertBefore(span,god[0]);}span.innerHTML=i+1;}god[0].className="current";}</script>
</head>
<body><div class="box" id="scroll"><!--<div class="circle">--><!--<span class="current">1</span>--><!--<span>2</span>--><!--<span>3</span>--><!--<span>4</span>--><!--<span>5</span>--><!--<span>6</span>--><!--</div>--><div class="slider"><ul class="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></div>
</body>
</html>

轮播图动态生成小圆点相关推荐

2020-11-05 css实例：轮播图上的小圆点
轮播图上的小圆点类似这种效果:(截图为京东代码) 选中当前图片时代码未选中当前图片时代码 css实例:轮播图上的小圆点 html代码:设置一个div盒子banner,里面放轮播图片和装圆点的容器 ...
怎么做轮播图中的小圆点html,JQuery和html+css实现带小圆点和左右按钮的轮播图实例...
是的!你没看错!还是轮播图.这次的JQuery的哟!! CSS代码: /*轮播图左右按钮小白点*/ #second_div{ margin-top: 160px; } .img_box{ over ...
微信小程序轮播图实现含小圆点图片下方显示标题
html代码 <view class="lb" ><swiper indicator-dots="true" autoplay="t ...
php实现轮播图代码,微信小程序实例：轮播图的代码实现与分析
本篇文章给大家带来的内容是关于微信小程序实例:轮播图的代码实现与分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 本文来说说轮播图,最常见的一个轮播图,中间带小圆点,自动轮播. S ...
php 更换轮播图片不显示不出来,layui 轮播图动态数据不显示问题
layui.use('carousel', function() { var carousel = layui.carousel; var ins = carousel.render({ elem: ...
js实现轮播图(点击小图片切换大图片+自动切换)
js实现轮播图(点击小图片切换大图片+自动切换) 实现效果如下: 点击小图切换大图和轮播标题,点击左右按钮大小图和轮播标题切换,鼠标进入清除定时器,鼠标移出恢复轮播 html代码如下: <div ...
HTML中轮播图里的圆点不充满,老师好，轮播图中的小点不显示
我设置了padding-botom 为40%还是不显示,请麻烦看一下这是什么问题呢 import { Swiper, SwiperItem } from "@/common/swiper&q ...
微信小程序vue轮播图_微信小程序使用swiper组件实现类3D轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单. ...
小程序轮播图_微信小程序层叠轮播图
效果展示 Demo代码 wxml <view class="selection_cards" bindtouchstart="touchstart" bi ...

轮播图动态生成小圆点

轮播图动态生成小圆点

效果图展示

直接上代码

轮播图动态生成小圆点相关推荐

最新文章

热门文章