问题有两个 ：
1，鼠标进入和移出只有第一次有用 后面就图片就开始乱切换了
2，点击右移按钮 图片不能从第一张切换到第5张
做了一天了 求大神搭救！<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
*{
margin: 0;padding: 0;
}
#ft{
position: relative;
width: 320px;height: 400px;
margin: 50px auto;border: 1px solid #000;
background-color: pink; border-radius: 15px;
}
.rt{
width: 30px;height: 30px;opacity:0.2;
top: 160px;left: 290px;position: absolute;z-index: 10;
}
.lt{
width: 30px;height: 30px;opacity:0.2;
position: absolute;top: 160px;z-index: 10;left: 0;
}
img{
width: 250px;height: 350px;
position: absolute;left: 34px;top: 25px;
}
.cg{
z-index: 9;
}
</style>
<body>
<p id="ft">
<p id="chd2">
<img class="cg" src="1.png" >
<img src="2.png" >
<img src="3.png" >
<img src="4.png" >
<img src="5.png" >
</p>
<p id="chd1">
<img class="lt" src="7.png" alt="">
<img class="rt" src="8.png" alt="">
</p>
</p>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js">
</script>
<script>
var $img=$("#chd2 img")
var $stp=$("#chd2")
var timer=setInterval(right,1500)
$stp.mouseout(function(){
setInterval(right,1500)
})
$stp.mouseover(function(){
clearInterval(timer)
})
$(".rt").click(right)//点击向左按钮
function right(){
for(var i=0;i<$img.length;i++){
if($img[i].className=="cg"&&i<$img.length-1){
$img[i].nextElementSibling.className="cg";
$img[i].className="";
break;
}else if(i==$img.length-1){
$img[i].className="";
$img[0].className="cg";
}
}
}
$(".lt").click(function(){//点击向右按钮
for(var i=0;i<$img.length;i++){
if($img[i].className=="cg"&&i>0){
$img[i].className="";
$img[i].previousElementSibling.className="cg";
break;
}else if(i==0){
$img[i].className="";
$img[4].className="cg";break
}
}
})
</script>
</body>
</html>
鼠标移出的时候又重新设置定时器的话，记得赋值给timer，不然后面的clearInterval都不知道clear sei了~
这个地方有问题，timer这个计时器一开始打开，第一次over后，关闭了这个计时器，再mouseout的时候开启了一个计时器 $stp.mouseout(function(){
但这个计时器并不是timer,所以，你后面就不可能清除这个计时器了。
雷雷 雷雷
为什么没人回答我第二个问题呢啊