Pause Slider Diaporama sur MouseOver

Question

J'ai modifié un script de curseur pour imiter le curseur d'ebay sur la page d'accueil. Je ne suis pas assez familier avec Javscript pour modifier le code pour permettre au diaporama de s'arrêter au passage de la souris. Toute aide serait appréciée.

échantillon de travail est à http://camoshop.com/test.html

code Javascript:

var TINY={}; 

function T$(i){return document.getElementById(i)} 
function T$$(e,p){return p.getElementsByTagName(e)} 

TINY.fader=function(){ 
function fade(n,p){this.n=n; this.init(p)} 
fade.prototype.init=function(p){ 
    var s=T$(p.id), u=this.u=T$$('li',s), l=u.length, i=this.l=this.c=this.z=0; 
    if(p.navid&&p.activeclass){this.g=T$$('li',T$(p.navid)); this.s=p.activeclass} 
    s.style.overflow='hidden'; this.a=p.auto||0; this.p=p.resume||0; 
    for(i;i<l;i++){ 
     if(u[i].parentNode==s){ 
      u[i].style.position='absolute'; this.l++; u[i].o=p.visible?100:0; 
      u[i].style.opacity=u[i].o/100; u[i].style.filter='alpha(opacity='+u[i].o+')' 
     } 
    } 
    this.pos(p.position||0,this.a?1:0,p.visible) 
}, 
fade.prototype.auto=function(){ 
    this.u.ai=setInterval(new Function(this.n+'.move(1,1)'),this.a*1000) 
}, 
fade.prototype.move=function(d,a){ 
    var n=this.c+d, i=d==1?n==this.l?0:n:n<0?this.l-1:n; this.pos(i,a) 
}, 
fade.prototype.pos=function(i,a,v){ 
    for(j=0;j<this.u.length;j++){if(j!=this.c && j!=i)this.u[j].style.zIndex=0;} 
    this.u[this.c].style.zIndex=1; 
    var p=this.u[i]; p.style.zIndex=2; 
    clearInterval(p.si); clearInterval(this.u.ai); this.u.ai=0; this.c=i; 
    if(p.o>=100&&!v){p.o=0; p.style.opacity=0; p.style.filter='alpha(opacity=0)'} 
    if(this.g){for(var x=0;x<this.l;x++){this.g[x].className=x==i?this.s:''}} 
    p.si=setInterval(new Function(this.n+'.fade('+i+','+a+')'),20) 
}, 
fade.prototype.fade=function(i,a){ 
    var p=this.u[i]; 
    if(p.o>=100){ 
     clearInterval(p.si); if((a||(this.a&&this.p))&&!this.u.ai){this.auto()} 
    }else{ 
     p.o+=5; p.style.opacity=p.o/100; p.style.filter='alpha(opacity='+p.o+')' 
    } 
}; 
return{fade:fade} 
}(); 

Answer 1

Remplacer fade.prototype.move fonction code suivant

fade.prototype.move=function(d,a) { 
    if($(this).is(":hover") == false) 
     var n=this.c+d, i=d==1?n==this.l?0:n:n<0?this.l-1:n; this.pos(i,a) 
} 

Answer 2

Une suggestion que quelqu'un a posté sur le site Web TinyFader:

* Pour ceux qui l'interrogeait sur un bouton de pause, ajoutez le code suivant à 'tinyfader.js'

fade.prototype.pause=function(){ clearInterval(this.u.ai); }; 

Remplacez le ';' c'est après le 'fade.prototype.fade = function {...};' fonction avec un « » puis collez ceci après la « » de sorte que vous code ressemble ...

//code snippet of tinyfader.js 
..., 
fade.prototype.fade=function(i,a){ 
var p=this.u[i]; 
if(p.o>=100) 
{clearInterval(p.si); if((a||(this.a&&this.p))&&!this.u.ai){this.auto()} 
}else{ 
p.o+=5; p.style.opacity=p.o/100; p.style.filter='alpha(opacity='+p.o+')' 
} 
}, 
fade.prototype.pause=function(){ clearInterval(this.u.ai); }; 
//end snippet 

* Une fois que le code est en place, vous pouvez appeler la fonction de pause en utilisant « slideshow.pause () ', ou' slidshowname .pause() '. Pour lire le diaporama à nouveau appeler juste « slideshow.auto() ». **

Une fois que vous faites cela ... essayez d'appeler la fonction de pause sur le vol stationnaire de l'image par jQuery ou javascript seulement ...

Essayez vous-même et délivrez-nous votre expérience ...

Answer 3

Je remplace fade.prototype.move fonction au code suivant

fade.prototype.move=function(d,a) {  
    if($("#"+$(this)[0]["n"]).is(":hover") == false) { 
     var n=this.c+d, i=d==1?n==this.l?0:n:n<0?this.l-1:n; this.pos(i,a) 
    } 
},