鼠标移入图片暂停，原理就是使用javaScript的定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.containor{
width: 800px;
height: 300px;
overflow: hidden;
border: 1px solid red;
margin: 200px auto;
}
img{
width: 400px;
height: 300px;
}
ul{
width: 2400px;
list-style: none;
margin: 0;
padding: 0;
}
ul>li{
float: left;
}
</style>
<script src="./jquery-3.5.0/jquery-3.5.0.min.js"></script>
<script>
$(function(){
// 自动轮播
var left=0;
function lunBo(){
timer=setInterval(()=>{
left+=-20;
if(left<=-1600){
// console.log(left);
left=0;
}
$(".containor>ul").css("marginLeft",left);
},100);
}
lunBo();
$("li").hover(()=>{
// 鼠标移入
clearInterval(timer);
$(this).siblings().children("img").fadeTo("slow",0.5);
$(this).children("img").fadeTo("slow",1);
},()=>{
// 鼠标移出继续执行
lunBo();
$("li").children("img").fadeTo("slow",1);
});
});
</script>
</head>
<body>
<div class="containor">
<ul>
<li><img src="./one.jpg" alt=""></li>
<li><img src="./two.jpg" alt=""></li>
<li><img src="./three.jpg" alt=""></li>
<li><img src="./four.jpg" alt=""></li>
<li><img src="./one.jpg" alt=""></li>
<li><img src="./two.jpg" alt=""></li>
</ul>
</div>
</body>
</html>