Merhabalar.
İşyerinde boş vakitlerimde Javascript dersleri izliyorum. Bir manşet uygulaması yapmaya çalıştım. Kullandığım kodda 2 saniye arayla manşet otomatik çalışıyor. Fakat sayfa ilk yüklendiğinde 4 saniye bekliyor. Sebebini çözemedim.
var slaytIndex = 0;
setInterval(function(){
slaytGoster(slaytIndex);
}, 2000);
function slaytGoster(sira){
var i;
var slaytlar = document.getElementsByClassName("manset-eleman");
for (i = 0; i < slaytlar.length; i++) {
slaytlar[i].style.display = "none";
}
slaytlar[sira].style.display = "block";
slaytIndex++;
if(slaytIndex >= slaytlar.length) {slaytIndex = 0;}
}
setInterval(function(){
console.log("Deneme");
}, 2000);<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Manşet</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<style>
#manset-alani {
height: 500px;
}
#manset-ici {
height: 440px;
}
.manset-eleman {
height: 440px;
line-height: 440px;
font-size: 100px;
}
#manset-1 {
background: #fd8585;
}
#manset-2 {
background: #859bfd;
display: none;
}
#manset-3 {
background: #8ffd85;
display: none;
}
#sayfalama {
height: 50px;
margin-top: 10px;
font-size: 30px;
line-height: 50px;
}
.sayfa:nth-child(1) {
background: #fd8585;
}
.sayfa:nth-child(2) {
background: #859bfd;
}
.sayfa:nth-child(3) {
background: #8ffd85;
}
.sayfa:hover {
background: #000000;
color: #fff;
}
</style>
</head>
<body>
<div class="container mt-5 p-0 text-center" id="manset-alani">
<div class="container p-0" id="manset-ici">
<div class="manset-eleman" id="manset-1">1</div>
<div class="manset-eleman" id="manset-2">2</div>
<div class="manset-eleman" id="manset-3">3</div>
</div>
<div class="container" id="sayfalama">
<div class="row">
<div class="col sayfa">1</div>
<div class="col sayfa mx-1">2</div>
<div class="col sayfa">3</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>