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);}

效果如下：

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

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

轮播图动态生成小圆点
轮播图动态生成小圆点效果图展示直接上代码效果图展示序号是倒序(个人练习使用) 不需要删除即可直接上代码 // An highlighted block <!DOCTYPE html&g ...
怎么做轮播图中的小圆点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 ...
c语言实现图片轮播,纯css实现轮播图
轮播图的实现原理其实是比较简单的举个例子 main的宽度是100px div-main的宽度是500px 我们用js控制div-main往左或往右移动,这样就实现了轮播,简单把好了,先介绍个 cs ...
HTML+CSS实现轮播图效果
HTML+CSS实现轮播图效果效果图如下(想要源码或者感兴趣的小伙伴可以评论区留言哦!) HTML部分源代码如下: <!DOCTYPE html> <html ><he ...
怎样实现banner自动播放html,纯css实现轮播图banner自动轮换效果
话不多说直接上代码 * { margin: 0; padding: 0; } .container { margin:300px auto; height: 400px; width: 1146px ...
html中制作banner,css banner轮播图怎么做？
css banner轮播图怎么做?下面本篇文章给大家简单介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 初步了解动画效果吧.轮播图我一直以为靠jquery插件完成的,突然发 ...
使用HTML+CSS实现轮播图
轮播图的实现使用CSS控制轮播图无自动轮转,只能通过悬浮标签来改变. 准备材料,一个div用来盛放所有参与轮播的图片.n个用来控制悬浮的小div.n-1个放好图片的img. 将div相对定位但是不 ...

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

轮播图上的小圆点

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

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

最新文章

热门文章