Php - Jquery slider yaptırılacak acil.
detay için pm.
Php - Jquery slider yaptırılacak acil!
3
●572
- 22-10-2012, 21:49:58JS DOSYASI
(function($){ $.fn.mavitmSlide = function(tConf){ var gecerliDiv; var aktifElm; var toplamElm = 0; var islemSira = 0; var currentElm = 0; var durakla = 0; var defaults = { 'ileriButton' : '.ileri', 'geriButton' : '.geri', 'buttonHover': true, 'otomatik' : true, 'progress':false, 'otomatikKapat' : true, /*kullaninici eylemlerinde otomatik hareketi devre disi birak*/ 'duraklamaSn' : 2000, 'gecisSn' : 1000, 'mausePause' : true, } var tConf = $.extend(defaults, tConf); function otomatikHareket(){ if(tConf.otomatik != true){return;} if(durakla == 1){setTimeout(otomatikHareket,tConf.duraklamaSn); return;} if(tConf.progress == true){ $(".slideProgress",gecerliDiv).fadeIn("normal"); $(".slideProgress .progresBand",gecerliDiv).css({width:"0px"}); } currentElm = (currentElm + 1) % toplamElm; $("#bilo").html(currentElm); $("li",aktifElm).fadeOut(tConf.gecisSn); $("li:eq("+currentElm+")",aktifElm).fadeIn(tConf.gecisSn,function(){islemSira = 0;setTimeout(otomatikHareket,tConf.duraklamaSn);}); if(tConf.progress == true){ $(".slideProgress .progresBand",gecerliDiv).animate({width:'100%'},tConf.duraklamaSn); } } function hareketEt(ileriGeri){ if(islemSira == 1){return;} islemSira = 1; if(tConf.otomatikKapat == true){ tConf.otomatik = false; $(".slideProgress",gecerliDiv).fadeOut("normal"); } if(ileriGeri == 1){ currentElm = (currentElm + 1) % toplamElm; }else{ currentElm = Math.abs(((currentElm == 0 ? toplamElm : currentElm) - 1) % toplamElm); } $("#bilo").html(currentElm); $("li",aktifElm).fadeOut(tConf.gecisSn); $("li:eq("+currentElm+")",aktifElm).fadeIn(tConf.gecisSn,function(){islemSira = 0;}); } return this.each(function() { $(this).css({overflow: "hidden","list-style-type":"none",position: "relative",background:"none"}); gecerliDiv = $(this); aktifElm = $(this).find("ul:first"); aktifElm.css({overflow: "hidden", listStyle:"none", width: "100%", height: $(this).height()+"px",position: "relative", top:"0px", left:"0px"}); toplamElm = aktifElm.children().size(); $("li",aktifElm).each(function(i){ var resimyolu = $("img:first",this).attr("src"); $(this).css({"background":"url("+resimyolu+") no-repeat center center",width:"100%",height:aktifElm.height()+"px", position:"absolute", top:"0px",left:"0px"}); $("img:first",this).remove(); }); $("li",aktifElm).fadeOut(100); $("li:first",aktifElm).fadeIn("normal"); if(tConf.mausePause == true){ $(this).hover( function(){ durakla = 1; if(tConf.progress == true){ $(".slideProgress",gecerliDiv).fadeOut("normal"); } if(tConf.buttonHover){ $(".slideControl",this).fadeIn("normal"); } }, function(){ durakla = 0; $(".slideProgress",gecerliDiv).fadeIn("normal"); if(tConf.buttonHover){ $(".slideControl",this).fadeOut("normal"); } } ); } if(tConf.progress == true){ $(this).append('<div class="slideProgress"><div class="progresBand"></div></div>'); } $(tConf.ileriButton).click(function(){hareketEt(1);}); $(tConf.geriButton).click(function(){hareketEt(0);}); if(tConf.otomatik){ setTimeout(otomatikHareket,tConf.duraklamaSn); } }); } })(jQuery);HTML
<div class="slide" id="slider"> <ul> <li><img src="upload/slide/134709999864721.jpg" alt="" /></li> <li><img src="upload/slide/134709919323226.jpg" alt="" /></li> <li><img src="upload/slide/134712051969061.jpg" alt="" /></li> <li><img src="upload/slide/134712054498165.jpg" alt="" /></li> <li><img src="upload/slide/134712056880978.jpg" alt="" /></li> </ul> <a class="slideControl slideileri">ileri</a><a class="slideControl slidegeri">geri</a> </div>TRIGGER
$("#slider").mavitmSlide({duraklamaSn:10000,gecisSn:400,ileriButton:'.slideileri',geriButton:'.slidegeri',progress:true});CSS
.slide{height:450px; background:url(../images/loading.gif) no-repeat center center #ebebeb; position:relative; z-index:1; margin-top:-19px; overflow:hidden;} .slide ul{position:relative; z-index:1;} .slide ul li{display:none;} .slide .slideControl{position:absolute; top:45%; z-index:300; display:block; width:30px; height:30px; overflow:hidden; text-indent:500px; display:none;} .slide .slideileri{background:url(../images/arrows.png) no-repeat top left; left:10px;} .slide .slidegeri{background:url(../images/arrows.png) no-repeat top right; right:10px;} .slide .slideProgress{width:100px; height:10px; position:absolute; top:10px; right:10px; background:#FFF; z-index:298; display:none;} .slide .slideProgress .progresBand{background-color:#298FB9; height:10px; width:0px;}