html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/pciscroll.css"/>
	</head>
	<body>
		<div class="container">
			<div class="pics">
				<img src="img/img01.png">
				<img src="img/img02.png">
				<img src="img/img03.png">
				<img src="img/img04.png">//图片路径
			</div>
			<div class="nav">
				<nav><span></span><span></span><span></span><span></span></nav>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript" src="js/jquery-1.12.4.min.js">
</script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>

我用的jQuery版本：

jQuery1.12.4免费获取
获取到以后把这个东西复制到js文件中然后上面方法引用进HTML就行了

css:

.container {
				position: relative;
				width: 940px;
			}

			.pics {
				width: 940px;
				height: 400px;
				border: 1px solid blue;
			}

			.nav {
				position: absolute;
				bottom: 25px;
				left: 15px;
			}

			.nav nav {}

			.nav nav span {
				margin-left: 10px;
				padding: 3px 14px;
				background-color: #c3c3c3;
				border-radius: 50%;
			}

js:

let PageModel = {
	index: 0,
	Init() {
		PageModel.ShowAndHide();
		window.setInterval("PageModel.PicScroll()", 3000);//三秒钟切换一次图片
		$("nav span").mouseover(function(){
			PageModel.index= $(this).css("background","red");//鼠标悬停时按钮的背景颜色为红色
			PageModel.index= $(this).index();//获取鼠标悬停时按钮所在的下标
			PageModel.ShowAndHide();
		});
		$("nav span").mouseout(function(){
			PageModel.index= $(this).css("background","#c3c3c3");//鼠标移出时按钮的背景颜色还原
			PageModel.index= $(this).index();//获取鼠标移出时按钮所在的下标
			PageModel.ShowAndHide();
		})
	},
	PicScroll() {
		PageModel.index++;
		if(PageModel.index>=$(".pics img").length){
			PageModel.index=0;
		}
		PageModel.ShowAndHide();
	},//图片轮播动画
	ShowAndHide() {
		$(".pics img").hide();//隐藏所有图片
		$(".pics img").eq(PageModel.index).show();//指定显示
	}//循环隐藏图片指定显示图片
};
$(PageModel.Init);//执行方法

原文链接：https://blog.csdn.net/as953/article/details/115676158