图片轮播（上一幅下一幅+圆点+自动切换） web前端

效果图如下：

文章图片

【图片轮播（上一幅下一幅+圆点+自动切换）】代码如下：

*{ margin:0; padding:0; } #imgList{ width:730px; height:420px; margin:100px auto; border:1px solid pink; position:relative; border:6px dashed pink; } #imgList:hover .pre,#imgList:hover .next{ display:block; } #imgList .img{ position:absolute; top:0; left:0; z-index:-1; } ul li{ list-style-type:none; float:left; } #imgList .num { float:right; margin-top:10px; } #imgList .num ul li{ width:16px; height:16px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; border:1px solid white; margin-right:6px; } #imgList .num ul li a{ display:block; width:16px; height:16px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; border:1px solid white; margin-right:6px; } #imgList .num ul li a:hover{ cursor:pointer; background-color:pink; } #button .pre{ width:60px; height:80px; background-color:rgba(0,0,0,0.5); color:white; font-size:40px; text-align:center; line-height:80px; vertical-align: middle; font-weight:bold; float:left; margin-top:170px; } .pre,.next{ display:none; } .pre:hover,.next:hover{ cursor:pointer; } #button .next{ width:60px; height:80px; background-color:rgba(0,0,0,0.5); color:white; font-size:40px; text-align:center; line-height:80px; vertical-align: middle; font-weight:bold; float:right; margin-top:170px; margin-right:-94px; } #imgList .img ul li{ width:730px; height:420px; background-image:url("s1.jpg"); } .class{ background-color:pink; } < >

图片轮播（上一幅下一幅+圆点+自动切换）

推荐阅读

空想社会主义的贡献

剥蒜皮的小窍门有哪些一起来看看吧

腾逸是什么意思腾逸的解释

王者荣耀这游戏,从一个新手小白到星耀需要多长时间？

python实现迭代法解方程

格力空调ul故障代码

寻人

神话胡歌版人物关系神话胡歌和谁在一起了

维他命b6可以回奶吗

redissql

asp.net书籍文献，aspnet web开发书籍

哪个购物平台可以通过完成任务来返现？

谷雨|谷雨|春色撩不尽，一枚雨衣入目来

女人哪些行为说明她在“撩”你？

1270v3支持d4内存吗,h81主板能用1270v3吗

2021高考一本压线该不该复读

k850座位表是怎样的？k850次列车为什么停运

python封装几个函数 python封装函数计算1到100的累加

格力空调E1故障解决方法及维修技巧，快速修复您的空调问题

活动游戏策划