<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-3.6.0.js"></script>
<title>Document</title>
<style>
#jnImageroll{
height: 320px;
overflow: hidden;
position: relative;
width: 550px;
margin: 0 auto;
}
#jnImageroll img{
position: absolute;
left: 0;
top: 0;
}
.dot{
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
font-size: 0;
margin-left: -40px;
}
.dot li{
display: inline-block;
margin: 0 5px;
width: 15px;
height: 15px;
border-radius: 100%;
background: rgba(145,144,144, .8);
cursor: pointer;
}
.dot .on{
background-color: #fff;
}
.arrow{
display: none;
}
.arrow span{
display: block;
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0);
color: #fff;
text-align: center;
font-size: 40px;
line-height: 50px;
cursor: pointer;
}
.arrow .prev{
position: absolute;
left: 0;
top: 50%;
margin-top: -50px;
}
.arrow .next{
position: absolute;
right: 0;
top:50%;
margin-top: -50px;
}
</style>
</head>
<body>
<div id="jnImageroll">
<a href="#nogo" id="JS_imgWarp">
<img src="images/1.jpg" alt="相约情人节">
<img src="images/2.jpg" alt="新款上线">
<img src="images/xiyangyangshangdiao.png" alt="愤怒的小鸟特卖">
<img src="images/xiyangyangjianjie.jpeg" alt="男鞋促销">
<img src="images/xiyangyang.jpeg" alt="春季新品发布">
</a>
<ul class="dot">
<li class="on"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="arrow"><span class="prev"><</span><span class="next">></span></div>
</div>
<script>
$(function () {
var $imgrolls=$("#jnImageroll ul li");
var len=$imgrolls.length;
var index=0;
var adTimer=null;
$('#jnImageroll').hover(function(){
$('.arrow').show();
},function(){
$('.arrow').show();
});
$('.prev').click(function(){
index--;
if(index<0){index=len-1}
showImg(index);
});
function showImg(index){
var $rollobj=$('#jnImageroll');
var $rolllist=$rollobj.find("ul li");
var newhref=$rolllist.eq(index).attr("href");
$("#JS_imgWrap").attr("href",newhref)
.find("img").eq(index).stop(true,true).fadeIn().siblings().fadeOut();
$rolllist.removeClass("on")
.eq(index).addClass("on");
}
$imgrolls.mouseover(function(){
index=$imgrolls.index(this);
showImg(index);
}).eq(0).mouseover();
$('#jnImageroll').hover(function(){
if(adTimer){
clearInterval(adTimer);
}
},function(){
adTimer=setInterval(function(){
showImg(index);
index++;
if(index==len){index=0;}
},3000);
}).trigger("mouseleave");
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<title>Document</title>
<style>
#jnImageroll{
height: 320px;
overflow: hidden;
position: relative;
width: 550px;
margin: 0 auto;
}
#jnImageroll img{
position: absolute;
left: 0;
top: 0;
}
.dot{
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
font-size: 0;
margin-left: -40px;
}
.dot li{
display: inline-block;
margin: 0 5px;
width: 15px;
height: 15px;
border-radius: 100%;
background: rgba(145,144,144, .8);
cursor: pointer;
}
.dot .on{
background-color: #fff;
}
.arrow{
display: none;
}
.arrow span{
display: block;
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0);
color: #fff;
text-align: center;
font-size: 40px;
line-height: 50px;
cursor: pointer;
}
.arrow .prev{
position: absolute;
left: 0;
top: 50%;
margin-top: -50px;
}
.arrow .next{
position: absolute;
right: 0;
top:50%;
margin-top: -50px;
}
</style>
</head>
<body>
<div id="jnImageroll">
<a href="#nogo" id="JS_imgWarp">
<img class="img" src="https://img0.baidu.com/it/u=1718241065,2019855389&fm=26&fmt=auto" alt="相约情人节">
<img class="img" src="https://img2.baidu.com/it/u=2260303532,2183863165&fm=26&fmt=auto" alt="新款上线">
<img class="img" src="https://img0.baidu.com/it/u=2201225864,2449795080&fm=26&fmt=auto" alt="愤怒的小鸟特卖">
<img class="img" src="https://img1.baidu.com/it/u=3352713640,4164566572&fm=26&fmt=auto" alt="男鞋促销">
<img class="img" src="https://img2.baidu.com/it/u=3925758292,293196376&fm=26&fmt=auto" alt="春季新品发布">
</a>
<ul class="dot">
<li class="on"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="arrow"><span class="prev"><</span><span class="next">></span></div>
</div>
<script>
$(function () {
var $imgrolls=$("#jnImageroll ul li");
var len=$imgrolls.length;
var index=0;
var adTimer=null;
$('#jnImageroll').hover(function(){
$('.arrow').show();
},function(){
$('.arrow').show();
});
$('.prev').click(function(){
if(index === 0){
index = len-1
}else{
index--
}
console.log(len,index)
// index--;
// if(index<0){index=len-1}
showImg(index);
});
//获取轮播的图片数组
var img=document.getElementsByClassName('img');//获取select对象
let imgarr = []
let optionArrStr = []
//获取选项的值
for(let i=0;i<img.length;i++){
imgarr.push(img[i].src)
}
function showImg(index){
var $rollobj=$('#jnImageroll');
var $rolllist=$rollobj.find("ul li");
var newhref=imgarr[index]
console.log(newhref)
$(".img").attr('src',newhref)
$("#JS_imgWrap").attr("href",newhref).stop(true,true).fadeIn().siblings().fadeOut();
// .find("img").eq(index)
$rolllist.removeClass("on")
.eq(index).addClass("on");
}
$imgrolls.mouseover(function(){
index=$imgrolls.index(this);
showImg(index);
}).eq(0).mouseover();
$('#jnImageroll').hover(function(){
if(adTimer){
clearInterval(adTimer);
}
},function(){
adTimer=setInterval(function(){
showImg(index);
index++;
if(index==len){index=0;}
},3000);
}).trigger("mouseleave");
})
</script>
</body>
</html>
建议你把完整代码包传上来， 毕竟这么多代码看下来还是很花时间。