<!DOCTYPE html>
<html>
<head>
<title>Elizmedya Resim Sıralama ve Gösterim</title>
<style>
#container {
width: 300px;
height: 300px;
border: 1px solid black;
position: relative;
}
.image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
}
</style>
</head>
<body>
<h1>Resim Sıralama Scripti</h1>
<button onclick="startAnimation()">Başlat</button>
<div id="container"></div>
<script>
var images = [
'https://cdn.r10.net/ogmeta.png',
'https://pbs.twimg.com/profile_images/1425794262751490057/6DpQm5BK_400x400.jpg',
'https://blog.r10.net/storage/uploads/post/2022/08/1200/675/r10net-davetiyesiz-uyelik-kisa-sureligine-tekrar-aktif.jpg'
];
var container = document.getElementById('container');
var currentIndex = 0;
var duration = 1000; // Süre (ms) - Örnekte 1 saniye olarak ayarlandı
function startAnimation() {
currentIndex = 0;
container.innerHTML = ''; // İçeriği temizle
animate();
}
function animate() {
if (currentIndex >= images.length) {
return; // Son resme ulaşıldığında dur
}
var image = new Image();
image.src = images[currentIndex];
image.classList.add('image');
container.appendChild(image);
setTimeout(function() {
image.style.display = 'block';
currentIndex++;
animate();
}, duration);
}
</script>
</body>
</html>
bu kodlarla dediğiniz işi yapabilirsiniz, daha profesyonel bir destek ararsanız PM yolu ile ulaşabilirsiniz.