JS实现banner轮播图

`Wᴀɪᴛ.`

于 2022-08-29 19:50:45 发布

阅读量1.9k

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/weixin_63112037/article/details/126591451

版权

本文介绍了如何使用JavaScript实现一个基本的Banner轮播图功能，包括点击按钮切换图片、小圆点指示器同步变化以及鼠标悬停自动播放和离开停止播放的交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现的功能:

1.点击右侧按钮一次，图片往左播放一张，左侧按钮同理。

2.图片播放的同时，下面的小圆圈模块也跟随一起变化。

3.鼠标不经过轮播图，轮播图会自动向右播放图片，经过轮播图之后停止自动播放图片。

以下是所有代码:

CSS代码:

        .contain img{
			width: 600px;
			height: 350px;
		}
		.contain{
			width: 3000px;    
			height: 350px;
			white-space: nowrap;
			font-size: 0;
			position: absolute;
			left: 0;
		}
		.wrapper{
			width: 600px;
			height: 350px;
			overflow: hidden;
			margin: 0 auto;
			position: relative;
		}
		.spots{
			position: absolute;
			left: 225px;
			bottom:10px;
		}
		.spots span{
			display: inline-block;
			width: 10px;
			height: 10px;
			border: 3px solid white;
			border-radius: 50%;
			margin-right: 10px;
		}
		
		a{
			text-decoration: none;
			color: dimgrey;
			font-size: 38px;
			position: absolute;
			top: 130px;
		}
		a:nth-of-type(1){
			left: 10px;
		}
		a:nth-of-type(2){

最低0.47元/天解锁文章