• 22-10-2012, 17:09:22
    #1
    Üyeliği durduruldu
    Php - Jquery slider yaptırılacak acil.

    detay için pm.
  • 22-10-2012, 17:11:55
    #2
    Üyeliği durduruldu
    pm gönderdim
  • 22-10-2012, 17:18:02
    #3
    Üyeliği durduruldu
    @RobinsonCrusoe iş verildi.
  • 22-10-2012, 21:49:58
    #4
    JS 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;}