JavaScript Slider Nasıl Yapılır:
Slider örneğimiz iki dosya ve 4 adet resimden oluşmaktadır. slider.html ve slide.js dosyaları ile ilgili açıklamaları aşağıda verdim. Kodları basitçe açıklamaya çalıştım. Bu aslında temel seviyede bir slider örneğidir. kodlarken sadece HTML ve JavaScript kullandım. CSS kurallarını kendi web sayfanıza göre uyarlayarak sitenizde kullanabilirsiniz. Turuncu ile işaretli satırla açıklama içindir. Kullanırken isteğe başlı olarak bu satırları silebilirsiniz.
slider.html kodları:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="slide.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Basit Slider</title>
</head>
<body onload="degistir()">
<img src="images/deniz-1.jpg" name="resim" width="400" height="300
" />
<!-- onload yerine burada script tagları açıp
<script type="text/javascript">
degistir();
</script> içine yazarak da slder'ı çalıştırabilirisiniz-->
</body>
</html>
slide.js kodları:
/*ilk önce Image() türünden değişkenler tanımlıyoruz bu değişkenler
Image() sınıfının src özelliğini kullanarak değişkenlere resimdosyalarının fiziksel adresleri yüklenecek
siz bu adresler yerine kendi resminizi koyabilirsiniz. değişken sayısını istediğiniz kadar arttırabilirsiniz.
*/
var image1 = new Image();
image1.src="images/deniz-1.jpg";
var image2 = new Image();
image2.src="images/deniz-2.jpg";
var image3 = new Image();
image3.src="images/deniz-3.jpg";
var image4 = new Image();
image4.src="images/deniz-4.jpg";
//şimdi resimlerin sıra ile değişmesini sağlayan degistir() adlı fonksiyonumuzu oluşturalım.
var adim =1;// tarayıcının kaçıncı resimde olduğunu anlamasını sağlayan değişken
function degistir(){
document.images.resim.src=eval("image"+adim+".src");
/* dokuman içinde name değeri resim olan elemanı bulur ve bu elemanın
src değerine adim değişkeninin değerine karşılık gelen başta oluşturduğumuz image değerini atar*/
if(adim<4)// eğer adim 4 ten küçükse (başta 4 resim için 4 değişken tanımladık)
adim++;// adim değerini bir arttırır
else // değilse
adim=1; // değeri 1 e eiştler
setTimeout("degistir()",3000); //degistir fonksiyonunu her 3000ms(3 saniye) de bir çalıştır
}
Slider'ın kodlarını aşağıdaki linkten indirebilirsiniz.
Kayıtlar
Hiç yorum yok :
Yorum Gönder