Hogyan lehetne megoldani azt, hogy az alábbi feladatban a képek 10 másodpercenként maguktól változzanak akkor, ha nem mozdul az egér. Ha pedig megmozdul akkor nullázza le ezt a 10mp-t és kezdje előről a számolást?
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Képek</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="kepcsere.css" />
<script src="kepcsere.js"></script>
</head>
<body>
<img id="kep" src="chiron.jpg" alt="szoveg">
<button id="vissza" onclick="kepcsere(this.id)"><</button>
<button id="elore" onclick="kepcsere(this.id)">></button>
</body>
</html>
let kepek = ["chiron.jpg","lambo.jpg","porsche.jpg","ferrari.jpg"];
let index = 0;
let szoveg = ["chiron","aventador","boxster","fxxk"]
function kepcsere(thisid) {
if (thisid == "vissza"){
index--;
if(index < 0){
index = kepek.length-1;
}
}else{
index++;
if(index > (kepek.length-1)){
index = 0;
}
}
document.getElementById("kep").src = kepek[index];
document.getElementById("kep").setAttribute("alt", szoveg[index]);
document.getElementById("kep").setAttribute("title",szoveg[index]);
}
2 dolognak kell utánanézned (ahogy látom a képcsere már megvan):
Hogyan kell feliratkozni "egérmozgás" eseményre (window addEventListener mousemove)
hogyan kell ismétlődő időzített eseményt elindítani (setInterval)
Ezek segítségével a művelet egyszerű:
Fogsz egy globális változót, mely számolja, hány másodperc telt el. Ezt folyamatosan növeli az időzítőd. Ha 10 másodpercig eljutott, változtatsz képet és 0-ra állítod a változód. Ha érzékeled az egérmozgást, szintén 0-ra állítod.
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!