Kodları lütfen aşağıdaki butonları kullanarak renklendirin. Örnek: <php> echo "Selam Dünya"; </php>
Yardım
karakter kaldı

Jquery Manşet Sistemi Otomatik Geçiş?

Merhaba Arkadaşlar bu manşet sistemini otomatik geçiş olmasını istiyorum ama uyarlayamadım bir türlü yardımcı olur musunuz kodlar aşağıda resim boyutlari ise width: 400px, height: 270 px şimdiden teşekkürler..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	
	$("#manset_resim li").hide();
	$("#manset_resim li:first").show();
	
	$("#manset_yazi li:first").addClass("aktif");
	
	$("#manset_yazi li").hover(function(){
		var a = $('#manset_yazi li').index(this); 
		
		$("#manset_resim li").hide();
		$("#manset_yazi li").removeClass("aktif");
		$(this).addClass("aktif");
		$("#manset_resim li:eq("+a+")").show();
	
	});
});
</script>

<style type="text/css">
body {font: 12px arial; margin:auto;}
ul,li {padding:0px; margin:0px; list-style-type:none;}
a {text-decoration:none;}
#manset {width:687px; height:274px; padding:8px 0px 8px 0px; background-image:url(images/bg.png); background-repeat:no-repeat; overflow:hidden;}
#manset_yazi {float:right; width:235px;margin-top:10px;}
#manset_yazi li a{ display:block; padding:8px 0px 9px 5px; color:black; text-shadow:1px 1px #FFF; font:bold 12px Arial, Helvetica, sans-serif;}
#manset_yazi li a:hover, #manset_yazi li.aktif a {background-color:#d22124; color:#fff; text-shadow:none;}
#manset_resim {width:400px; height:270px; overflow:hidden; padding:0px 5px 0px 5px;}
#manset_resim li a img {width:400px; height:270px; border:none }

</style>
</head>

<body>
<div id="manset">
<ul id="manset_yazi">
<li><a href="#">Deneme1 </a></li>
<li><a href="#">Deneme2</a></li>
<li><a href="#">Deneme3 </a></li>
<li><a href="#">Deneme4 </a></li>
<li><a href="#">Deneme5 </a></li>
<li><a href="#">Deneme6 </a></li>
<li><a href="#">Deneme7 </a></li>
<li><a href="#">Deneme8 </a></li>
</ul>
<ul id="manset_resim">
<li><a href="#"><img src="images/01.png" /></a></li>
<li><a href="#"><img src="images/02.png" /></a></li>
<li><a href="#"><img src="images/03.png" /></a></li>
<li><a href="#"><img src="images/04.png" /></a></li>
<li><a href="#"><img src="images/05.png" /></a></li>
<li><a href="#"><img src="images/06.png" /></a></li>
<li><a href="#"><img src="images/07.png" /></a></li>
<li><a href="#"><img src="images/08.png" /></a></li>
</ul>
</div>
</body>

</html>
+0
-0
Cevaba KatılıyorumKatılmıyorum
Cevap Yaz Yorum Yaz Arşivime Ekle Takip Et

Cevaplar

  • emoty_88 adlı üyenin fotoğrafı
    10 yıl önce yazılmış
    26 cevap - 17 soru
    setTimeout("alert('Thirty seconds has passed.');",30000); işini görecektir tam olarak kodunun geçiş fonksiyonunu incelemedim ama

    bu kod ile istediğin saniyede bir o fonksiyonu çağırabilirsini bir

    en mantıklısı bir fonsiyon hazırla id sini verdiğin li yi aktif yapsın 5 sn de bir de jquer ile bir sonraki linin id sini öğrenip o fonksiyona atarsın

    sonuncuya kontrol koyup ilke göndermeyi unutma
  • zyber adlı üyenin fotoğrafı
    10 yıl önce yazılmış
    57 cevap - 25 soru
    Soruna cevap olarak yazmıyorum ancak jquery i daha fonksiyonel kullanmak adına aşağıdaki gibi yazarsan daha güzel bir kod olur...

    tasarımı yok sadece mantığına bakın...

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $('.manset-list ul li').hover(function(){ 
    $('.baslik a').html($(this).find('a').attr('title'));
    $('.manset-img a').attr('href', 'haber.php?id='+$(this).find('a').attr('href')); 
    $('.baslik a').attr('href', 'haber.php?id='+$(this).find('a').attr('href')); 
    $('.manset-img a img').attr('src', 'resimler/'+$(this).find('a').attr('rel')+'.jpg');
    });
    });
    </script>
    </head>
    
    <body>
    <div class="manset-sol">
     <div class="manset-img"><a href=""><img src="" alt="" width="300" height="200"/></a></div>
     <div class="baslik">
      <h3>BAŞLIK</h3>
      <a href="" class="butun-yazarlar"></a>
     </div>
    </div>
    <div class="manset-list">
      <ul>
       <li><a href="1" rel="01.png" title="Haber 01">Haber 01</a></li>
       <li><a href="2" rel="02.png" title="Haber 02">Haber 02</a></li>
       <li><a href="3" rel="03.png" title="Haber 03">Haber 03</a></li>
       <li><a href="4" rel="04.png" title="Haber 04">Haber 04</a></li>
       <li><a href="5" rel="05.png" title="Haber 05">Haber 05</a></li>
       <li><a href="6" rel="06.png" title="Haber 06">Haber 06</a></li>
       <li><a href="7" rel="07.png" title="Haber 07">Haber 07</a></li>
       <li><a href="8" rel="08.png" title="Haber 08">Haber 08</a></li>
       <li><a href="9" rel="09.png" title="Haber 09">Haber 09</a></li>
       <li><a href="10" rel="10.png" title="Haber 10">Haber 10</a></li>
      </ul>
     </div>
    </body>
    </html>