JavaScript——网页轮播图（实现点击小圆点、图片滑动、小圆点样式改变）

最新推荐文章于 2024-06-21 13:57:48 发布

鹿蹊zz

最新推荐文章于 2024-06-21 13:57:48 发布

阅读量9.2k

点赞数 13

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_46461853/article/details/125626187

版权

一、轮播图要实现的效果：

实现点击小圆点、图片滑动、小圆点样式改变

二、轮播图实现效果步骤：

1.利用html+css完成轮播图片，底部小点的整体效果的布局。

2.通过原生js完成图片轮播，无缝自动切换，底部小点随图片切换而切换。

css部分

 	        *{
				padding: 0px;
				margin: 0px;
			}
			.banner{
				 width: 600px;
				 margin: auto;
				 border: 10px solid green;
				 height: 350px;
				 position: relative;
				 overflow: hidden;
			}
			.imgList img{
				 width: 600px;
				 height: 350px;
			}
			.imgList{
				/* 绝对定位 */
				 position: absolute;
				/* left:-600px; */
				/* width: 2600px; */
			}
			.imgList li{
				 float:left;
			  	 margin-right: 20px;
				 list-style: none;
			}
			.circle{
                 position: absolute;
                 bottom: 15px;left:50%;
                 transform:translateX(-50%);}
			.circle a{
				 width: 15px;
				 height: 15px;
				 background: green;
				 display: block;
				 border-radius: 50%;
				 opacity: .8;
				 flo