Forum
Aktif konular
Üyeler
Kurallar
Arama
Sliderda Otomatik Akış Sliderda Otomatik Akış
-
Beyler kendimce şöyle bir slider yazmaya çalıştım.Çalışıyo fakat buna birde otomatik akış sağlamak istiyorum mesela 5sn'de bir değişsin gibi..
Ne yazmam lazım yardımcı olacaklara şimdiden teşekkürler..
<script type="text/javascript">
$(document).ready(function(){
$('div#bir').fadeIn(1);
$('div#iki').fadeOut(1);
$('div#uc').fadeOut(1);
$('div#dort').fadeOut(1);})
function Goster(x,y,z,w){
$('div#'+x).fadeIn(500);
$('div#'+y).fadeOut(1);
$('div#'+z).fadeOut(1);
$('div#'+w).fadeOut(1);
}
</script>
CSS KISMI
<style type="text/css">#ana { width:596px; height:266px;}
.genel { float:left;}
div#menu { width:120px; height:266px; float:right; background-color:#fff; }
div#menu li { list-style-type:none; margin-top:-5px; margin-left:-40px; }
#bir, #iki, #uc, #dort{ width:474px; height:266px; border:1px solid #CCC; position:absolute; margin:0 auto; background-color:#CCC; }
</style>HTML KODLARI
<div class="genel">
<div id="bir"><img src="#" /></div>
<div id="iki"><img src="#" /></div>
<div id="uc"><img src="#" /></div>
<div id="dort"><img src="#" /></div>
</div>
<div id="menu">
<ul>
<li><a href="#" onclick="Goster('bir','iki','uc','dort')"><img src="#" /></a></li>
<li><a href="#" onclick="Goster('iki','bir','uc','dort')"><img src="#" /></a></li>
<li><a href="#" onclick="Goster('uc','iki','bir','dort')"><img src="#" /></a></li>
<li><a href="#" onclick="Goster('dort','bir','iki','uc')"><img src="#" /></a></li>
</ul>
</div> -
hala yapamadım yok mu yardım edebilicek ?
-
edit :örnek aşağıda
not : hocam isteklerini konuya yaz pm atma
-
// TBT LostDream Slider beta :| // AYARLAR // var baslangicID = 1; var bitisID = 4; var beklemesuresi = 2000; // 2 saniye var changetime = null; $(document).ready(function(){ $('div.benimslider').hide(); Goster(baslangicID); }); function Goster(x) { clearInterval(changetime); if(x>bitisID){ x = baslangicID; } $('div.benimslider').hide(); $('div#'+x).fadeIn(500); changetime = setInterval(function() { Goster(x+1); }, beklemesuresi); }<style type="text/css"> #ana { width:596px; height:266px;} .genel { float:left;} div#menu { width:120px; height:266px; float:right; background-color:#fff; } div#menu li { list-style-type:none; margin-top:-5px; margin-left:-40px; } .benimslider{ width:474px; height:266px; border:1px solid #CCC; position:absolute; margin:0 auto; background-color:#CCC; } </style> <div class="genel"> <div id="1" class="benimslider"><img src="http://moviesmedia.ign.com/movies/image/article/121/1218639/14-odd-valentines-20120214020246346.jpg" /></div> <div id="2" class="benimslider"><img src="http://www.blogcdn.com/onthespot.cambio.com/media/2011/03/picture-2-1301078749.png" /></div> <div id="3" class="benimslider"><img src="http://srv1.ilpvideo.com/img/2012/02/08/pig-eating-a-dog.png" /></div> <div id="4" class="benimslider"><img src="http://www.blogcdn.com/onthespot.cambio.com/media/2011/03/picture-2-1301078749.png" /></div> </div>az bişey değişiklikler yaptım
mesela hepsini tektek hide yapmaktansa bi class tanımlayıp sadece o classa ait olanları gizledik
ve goster fonksiyonuna tek tek id gondermektense numeric yapıp id = id+1 şeklinde sonraki id geçsin dedik
sona gelincede if le kontrol ettirip başa çektik vs. kalanını kendii düzenlersin hocam
-
Hocam zaten kimse dokunmadı bi sen bişeyler yazınca sana msj attım neyse.
Şöyle bişey yazdım şimdilik idareten iş görüyo da zamanlamalarda sorun oluyo böyle.. Yine senin Interval çok işime yaradı çok çok sağol..
// JavaScript Document var iCounter = 0; var changetime = null; function oynat() { iCounter++; switch(iCounter){ case 1: $("#bir").fadeIn(1000); break; case 2: $("#bir").fadeOut(1000); break; case 3: $("#iki").fadeIn(1000); break; case 4: $("#iki").fadeOut(1000); break; case 5: $("#uc").fadeIn(1000); break; case 6: $("#uc").fadeOut(1000); break; case 7: $("#dort").fadeIn(1000); break; case 8: $("#dort").fadeOut(1000); iCounter = 0; break; } } $(document).ready(function(){ $('div#bir').fadeOut(1); $('div#iki').fadeOut(1); $('div#uc').fadeOut(1); $('div#dort').fadeOut(1); iCounter = 0; changetime = setInterval("oynat()", 1000); }) var Replay; var blClicked = false; function Goster(x,y,z,w){ if(!!blClicked){ return; }else{ blClicked = true; clearInterval(changetime); $('div#'+x).fadeIn(500); $('div#'+y).fadeOut(1); $('div#'+z).fadeOut(1); $('div#'+w).fadeOut(1); Replay = setInterval("fncReplay()", 3000); } } function fncReplay(){ blClicked = false; clearInterval(Replay); iCounter = 0; changetime = setInterval("oynat()", 1000); } -
Bu da demo bakabilirsiniz. Bu tarz bişey istiyodum ama zamanlama için azıcık daha uğraşmam lazım.
Kısayol
Şikayet
Özel Mesaj
Alıntı yap
Cevapla