Bu dersimizde basit olarak değişen başlıklar uygulaması yapacağız. İçeriğe tam bir başlık bulamadım o yüzden başlık çok açıklayıcı olmayabilir 
. Kodların uzamaması için çok fazla css yazmadım Siz kendinize göre css yazabilirsiniz . Şimdi kodlara geçelim .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery örnekleri - Webderslerim.com</title>
<style>
.basliklar{
width:500px;
margin:0px auto;
}
.basliklar ul{
border:1px solid #ddd;padding:17px;
box-shadow: 0px 4px 15px #cfcfcf
}
.basliklar ul li{
list-style-type: none;
display:none;
}
.basliklar ul li a{
display:block;
margin:0px auto;
text-decoration: none;
color:#8f8686;
}
</style>
</head>
<body>
<div class="basliklar">
<ul>
<li><a href="">1.Deneme başlık</a></li>
<li><a href="">2.Deneme başlık</a></li>
<li><a href="">3.Deneme başlık</a></li>
<li><a href="">4.Deneme başlık</a></li>
<li><a href="">5.Deneme başlık</a></li>
</ul>
<button class="sonraki_btn">Sonraki</button>
<button class="onceki_btn">Önceki</button>
</div>
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
$(function () {
var toplam = $(".basliklar ul li").length; // Toplam başlık sayısını buluyoruz
var i = 0; // i değerini sıfıra eşitliyoruz
$.sonraki = function () { // Sonraki adlı fonksiyon ile bir sonraki başlığı gösteriyoruz
$(".basliklar ul li").stop().eq(i).fadeOut(500, function () { // i değerindeki başlığı gizle
i++; // Her çalıştığında i değişkenini 1 arttır
if (i === toplam) { // Eğer i değişkeni toplam başlık sayısına eşit ise
i = 0; // i değerini 0'a eşitle
}
$(".basliklar ul li").stop().eq(i).fadeIn(500); // değişen i değerine eşit olan başlığı göster
});
};
$.onceki = function () { // Önceki adlı fonksiyon ile bir önceki başlığı gösteriyoruz
$(".basliklar ul li").stop().eq(i).fadeOut(500, function () { // i değerindeki başlığı gizle
if (i === 0) { // Eğer i değeri sıfıra eşit ise
i = (toplam-1); // i değerini toplam değişkeninin 1 eksiğine eşitle (index değerleri sıfırdan başladığı için son veriyi seçmek için toplamın bir eksiğini alıyoruz)
}else{
i--; // i değişkenini bir azalt
}
$(".basliklar ul li").eq(i).stop().fadeIn(500); // değişen i değerine eşit olan başlığı göster
});
};
$(".basliklar ul li").hide(); // Sayfa yüklendiğinde tüm başlıkları gizle
$(".basliklar ul li:first").show(); // İlk başlığı göster
var timer = setInterval($.sonraki, 2000); // setInterval fonksiyonu ile 2000 milisaniyede bir sonraki fonksiyonunu çalıştır.
$(".basliklar").hover(function(){ // Class'ı basliklar olan divin üstüne gelince
clearInterval(timer); // otomatik değişmesini durdur
},function(){// Class'ı basliklar olan divin üstünden ayrılınca
timer = setInterval($.sonraki, 2000); // otomatik değiştirmesini yeniden başlat
});
$('button.sonraki_btn').click(function(){
// Class'ı sonraki_btn olan butona tıklayınca $.sonraki adlı fonksiyonu çalıştır
$.sonraki();
});
$('button.onceki_btn').click(function(){
// Class'ı onceki_btn olan butona tıklayınca $.onceki adlı fonksiyonu çalıştır
$.onceki();
});
});
</script>
</body>
</html>Yorum yapmak için lütfen giriş yapın veya üye olun