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;}