- Gemeinschaft
- Lernen
- Tools-Bibliothek
- Freizeit
Heim > Fragen und Antworten > Hauptteil
Es gibt zwei Probleme:
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)
})鼠标移出的时候又重新设置定时器的话，记得赋值给timer，不然后面的clearInterval都不知道clear sei了~
阿神2017-05-19 10:12:56
var timer=setInterval(right,1500)
$stp.mouseout(function(){
setInterval(right,1500)
})
$stp.mouseover(function(){
clearInterval(timer)
})
这个地方有问题，timer这个计时器一开始打开，第一次over后，关闭了这个计时器，再mouseout的时候开启了一个计时器 $stp.mouseout(function(){
setInterval(right,1500)
})但这个计时器并不是timer,所以，你后面就不可能清除这个计时器了。
某草草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();
})
})();