There are two problems:
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>
高洛峰2017-05-19 10:12:56
var timer=setInterval(right,1500)
$stp.mouseout(function(){
timer = setInterval(right,1500)
})
$stp.mouseover(function(){
clearInterval(timer)
})If you reset the timer when the mouse is moved out, remember to assign a value to timer, otherwise the subsequent clearInterval will not know the clear sei~
阿神2017-05-19 10:12:56
var timer=setInterval(right,1500)
$stp.mouseout(function(){
setInterval(right,1500)
})
$stp.mouseover(function(){
clearInterval(timer)
})
There is a problem here. The timer is turned on at the beginning. After the first over, the timer is turned off. When mouseout is performed again, a timer is turned on $stp.mouseout(function(){
setInterval(right,1500)
})But this timer is not a timer, so you cannot clear this timer later.
某草草2017-05-19 10:12:56
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html{
margin: 0;
padding:0;
}
img{
display: none;
}
</style>
<title>Title</title>
</head>
<body>
<p id="scroll" style="width: 400px;height:200px;padding: 20px ">
<img src="1.bmp" alt="">
<img src="2.bmp" alt="">
<img src="3.bmp" alt="">
<img src="4.bmp" alt="">
</p>
<script src="app.js"></script>
</body>
</html>(function () {
let scroll = document.getElementById("scroll");
let images = Array.prototype.slice.call(document.querySelectorAll("#scroll > img"));
let index = 0;
images[index].style.display = "block";
let startScroll = function () {
return setInterval(
function () {
for(let image of images){
image.style.display = "none";
}
images[index].style.display = "block";
index = (index+1)>3?0:index+1
},
1000
);
};
let int = startScroll();
scroll.addEventListener("mouseover",function (e) {
clearInterval(int);
});
scroll.addEventListener("mouseout",function (e) {
int = startScroll();
})
})();