/* ------------------------------------------------------------------------
plugin-name:zxdSlider
Developped By: ZHAO Xudong -> http://html5beta.com
Version: 1.0
Copyright: Feel free to redistribute the script/modify it, as
long as you leave my infos at the top.
------------------------------------------------------------------------ */
(function($){
$.fn.zxdSlider = function() {
var zxdCaller = this.attr('id');
var sliderUnit = $("#"+zxdCaller);
var sc = $("."+zxdCaller+"li");
var queueName = zxdCaller+"Queue";//queue-name
var delayFlag = false;
var current = 0; //current is the slider index
var maxNo = -1;
sc.each(function(i){maxNo=i}); // check how many unit to slide
var shortDelay = 600;
var longDelay = 3000;
var fq = [ //this is the function loop.after it fires,it never ends
function(){sc.eq(current).show(shortDelay,af);},
function(){setTimeout(af,shortDelay);},
function(){sc.eq(current).children("span").show(shortDelay,af)},
function(){setTimeout(af,longDelay);},
function(){
if (delayFlag==false){//if mouseover ,the current slider do not hide
sc.eq(current).children("span").hide(shortDelay/2,af);
}
else {
af();
}
},
function(){
if (delayFlag==false){ //if mouseover ,the current slider do not hide
sc.eq(current).hide(shortDelay/2,af);
}
else {
af();
}
},
function(){
if(delayFlag==false) { //if mouseover ,slider index stays the same.
current++;
af();
}
else{
af();
}
},
function(){// the last function fires the loop again
slider();
}
];
var af = function(){//use dequeue to make the loop move forward
$(document).dequeue(queueName);
};
$(".rightnav").click(function(){//click to see next slider
sc.eq(current).children("span").hide(shortDelay/2);
sc.eq(current).hide(shortDelay/2);
current++;
});
$(".leftnav").click(function(){//click to see previous slider
sc.eq(current).children("span").hide(shortDelay/2);
sc.eq(current).hide(shortDelay/2);
current--;
});
sliderUnit.hover( //when mouseover the slider, freeze slider,show the button
function(){
delayFlag=true;
$(".slidernav").css("color","#fff");
longDelay/=4;
},
function(){ //when mouse leave, slider back to normal,hide the button
delayFlag=false;
$(".slidernav").css("color","transparent");
longDelay*=4;
}
);
var slider = function(){//where the slider starts
if(current>=(maxNo+1)) {current=0;}
if (current<=-1) {current=maxNo;}
$(document).queue(queueName,fq);
af();
}
slider();//fire the loop
};
})(jQuery);
您可以在http://html5beta.com/a-demo-for-zxdslider/看到我的演示 从萤火虫或其他东西读取它。 它适用于jquery 1.4.4和之前，只是不适用于jquery 1.5.0。 我真的找不到原因。 滑块因某种未知原因而停止。