jquery实现左右轮播切换效果

console.log(data);
var html="";
const LIWIDTH=960;
for(var item of data){
html+=`<li>
<a href="${item.href}" rel="external nofollow" title="${item.title}">
<img src="${item.img}">
</a>
</li>`;
}
html+=`<li>
<a href="${data[0].href}" rel="external nofollow" title="${data[0].title}">
<img src="${data[0].img}">
</a>
</li>`;
console.log(html);
var $ulImg=$(".banner-img");
$ulImg.html(html).css("width",LIWIDTH*(data.length+1));

var $ids=$(".indicators");

$ids.html("<li></li>".repeat(data.length)).children().first().addClass("hover");

const WAIT=2000,DURA=1000;
var moved=0,timer=null;
function move(dir=1){
moved+=dir;
console.log("moved="+moved);

$ulImg.animate({
left:-LIWIDTH*moved
},DURA,()=>{
if(moved%data.length==0){
moved=0;
$ulImg.css("left",0);
}
$ids.children(`li:eq(${moved})`).addClass("hover").siblings().removeClass("hover");
})
}

var timer=setInterval(move,WAIT);

$('#banner').hover(
()=>{ //这个是什么？
clearInterval(timer),
timer=null;
},
()=>{
timer=setInterval(move,WAIT);
}
);

$("[data-move=right]").click(()=>{
//防止动画叠加
/*clearInterval(timer);
timer=null;
move();
timer=setInterval(move,WAIT);*/
if(!$ulImg.is(":animated"))
move();
});

$("[data-move=left]").click(()=>{
if(!$ulImg.is(":animated")){
if(moved==0){
$ulImg.css("left",-LIWIDTH*data.length);
moved=data.length;
}
move(-1);
}
});

$ids.on("mouseover","li",function(){
var $li=$(this);
var i=$li.index();
moved=i;
$ulImg.stop(true).animate({
left:-LIWIDTH*moved
},DURA,()=>{
$ids.children(":eq("+i+")")
.addClass("hover")
.siblings().removeClass("hover");
})
});
})
})

php：

<?php 
 header("Content-type:application/json");
 require_once("init.php"); 
 $sql="SELECT img,title,href FROM xz_index_carousel";
 $result=mysqli_query($conn,$sql);
 echo json_encode(mysqli_fetch_all($result,1));
?>