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>

Cevaplar

12 yıl önce yazılmış

emoty_88

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

12 yıl önce yazılmış

zyber

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>

Raporsuz_Deli

Jquery Manşet Sistemi Otomatik Geçiş?

Cevaplar