Javascript 代码：【复制】 
//初始时，索引1背景为红色，并显示第一张图片，
$(".sliderBody .slidertitle li").first().show().siblings().hide();
$(".sliderBody .sliderImage li").first().show().siblings().hide();
//鼠标over在索引值上时，切换图片，并将当前索引复制给全局变量i，便于接下来从当前图片开始轮播
i = 0;//全局变量，记录当前轮播图的索引

function playImage(){//播放下一张图片的函数
	i++;
	if (i > 3){
		i = 0;
	}
	$(".sliderBody .sliderImage li").eq(i).fadeIn(1000).siblings().fadeOut(1000);
	$(".sliderBody .slidertitle li").eq(i).fadeIn(1000).siblings().fadeOut(1000);
}
//每2s播放下一张图片
var time = setInterval(playImage,2000);
//鼠标放在.sliderBody区域时，轮播停止；离开时，轮播继续
$(".sliderBody .sliderBody").hover(function() {
	clearInterval(time)
},function(){
	time = setInterval(playImage,2000);
});
//点击向右翻页

$(".sliderBody .btn_right").click(function() {
	playImage();
});

//点击向左翻页时，先将i-2,再向右翻页
$(".sliderBody .btn_left").click(function() {
	i = i - 2;
	if (i < -1) {
		i = 2;
	}
	playImage();
})

HTML 代码：【复制】 
<div class="sliderBody">
	<ul class="sliderImage">
	   <li><a href=""><img src="https://imgres.crsky.com/crsky/common/202007211654245f16ad40c6988.jpg" /></a></li>
	   <li><a href=""><img src="https://imgres.crsky.com/crsky/73/360555-202111051710066184f4eedfb9f.jpg" /></a></li>
	   <li><a href=""><img src="https://imgres.crsky.com/crsky/88/437882-2022070111581062be70d24371b.jpg" /></a></li>
	   <li><a href=""><img src="https://imgres.crsky.com/crsky/82/408860-20220418165402625d272a3bf80.jpg" /></a></li>
	</ul>
	<ul class="slidertitle">
		<li><a href="">标题1</a></li>
		<li><a href="">标题2</a></li>
		<li><a href="">标题3</a></li>
		<li><a href="">标题4</a></li>
	</ul>
	<div class="btn_left button"> < </div>
	<div class="btn_right button"> > </div>
</div>

CSS 代码：【复制】 
.sliderBody {
	position:relative;
	width:320px;
	height:240px;
	border:dashed cadetblue 1px;
	margin:0 auto;
}
.sliderBody ul li {
	padding:0px;
	margin:0px;
	list-style:none;
}
.sliderBody .sliderImage img {
	width:320px;
	height:240px;
	position:absolute;
	top:0px;
	left:0px;
}
.sliderBody .slidertitle li {
	position:absolute;
	left:0px;
	bottom:0px;
	text-align:center;
	background:#fff0b5;
	display:block;
	width:100%;
	line-height:25px;
	opacity:0.6;
}
.sliderBody .slidertitle li a {
	color:#000000;
	display:block;
	text-decoration:none;
}
.sliderBody .button{
	width:34px;
	height:40px;
	line-height:40px;
	text-align:center;
	background:gray;
	opacity:0.6;
	position:absolute;
	top:50%;
	margin-top:-30px;
	font-size:20px;
	font-weight:bold;
	display:none;
	cursor:pointer;
}
.sliderBody .btn_right{
	position:absolute;
	right:0px;
}
.sliderBody:hover .button{
	display:block;
}