2020-11-05 css实例：轮播图上的小圆点

轮播图上的小圆点

类似这种效果:（截图为京东代码）

选中当前图片时代码

未选中当前图片时代码

css实例：轮播图上的小圆点

html代码：设置一个div盒子banner,里面放轮播图片和装圆点的容器

<div class="banner">
			<ul>
				<li><a href=""><img src="img/652777a7ca7a0519.jpg.webp" alt="" />a>li>
				<li><a href=""><img src="img/82c1a44e6aea5cbf.jpg.webp" alt="" />a>li>
				<li><a href=""><img src="img/bd5a97e219c1486b.jpg.webp" alt="" />a>li>
				<li><a href=""><img src="img/cc6bedce2b27a6a0.jpg.webp" alt="" />a>li>
				<li><a href=""><img src="img/f53e74cdd7050c45.jpg.webp" alt="" />a>li>
				<li><a href=""><img src="img/q.jpg" alt="" />a>li>
			ul>
			<div class="circle">
				<a href="">a>
				<a href="">a>
				<a href="">a>
				<a href="">a>
				<a href="">a>
				<a href="">a>
			div>
		div>

css代码：

*{			/*重置样式*/
	margin: 0;
	padding: 0;
}
.banner{		/*banner盒子样式*/
	width: 590px;/*宽度*/
	height: 470px;/*高度*/
	margin: auto;/*设置水平居中*/
	position: relative;/*给父元素设置相对定位，子绝父相*/
}
ul{			/*轮播图片盒子*/
	width: 590px;	
	height: 470px;	/*一个图片的高度*/
	overflow: hidden;/*溢出隐藏，只显示一个图片*/
	margin: auto;
}
.circle{	/*设置圆点位置*/
	position: absolute;/*给子元素设置绝对定位，相对于父元素*/
	left:30px;/*距离父元素内部的右边距离*/
	bottom:25px;/*距离父元素内部的上边距离*/
}
.circle a{	/*设置圆点样式*/
	display: inline-block;/*设置a链接为行内块，可以设置宽高，不换行*/
	width: 15px;
	height: 15px;
	border-radius: 50%;/*设置圆边，把方形变成圆形*/
	background: rgba(255,255,255,0.5);/*背景颜色设置不透明*/
	margin-right: 5px;/*设置每个a距离右边5px,圆点之间距离*/
	
}
.circle a:hover{	/*设置鼠标滑动时圆点样式*/
	background: #fff;/*圆点背景颜色*/
	border:2px solid red;/*圆点边框样式*/
	width: 11px;
	height: 11px;
	border-color:rgba(0,255,0,0.5) ;/*圆点边框不透明度*/
}

效果如下：

京东样式，颜色数值不一样

.circle a{
				display: inline-block;
				width: 8px;
				height: 8px;
				border-radius: 50%;
				border:1px solid rgba(0,0,0,.05);
				background: rgba(255,255,255,.4);                 
			}
			.circle a:hover{
				width: 9px;
				height: 9px;
				top:2px;/*圆点向上移动，跳动效果*/
				left:0;
				/*background:#fff;*/
				border:3px solid rgba(0,0,0,.1);
			}

效果如下：

由于本人水平有限，博客错误之处，烦请指正！