MouseOver에서 슬라이드를 일시 중지합니다.

Question

홈 페이지에서 이베이의 슬라이더를 모방하도록 슬라이더 스크립트를 수정했습니다. 마우스 오버시 슬라이드 쇼가 중단되도록 코드를 수정하는 데 Javscript에 익숙하지 않습니다. 어떤 도움을 주시면 감사하겠습니다.

근무 샘플 http://camoshop.com/test.html

자바 스크립트 코드에 있습니다 :

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

코드를 다음과 fade.prototype.move 기능을 교체

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

사람이 TinyFader 웹 사이트에 게시 제안 :

* 일시 정지 버튼에 대해 질문하는 사람들을 위해 를, 'tinyfader.js'가

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

교체에 다음 코드를 추가 ';' 즉, 'fade.prototype.fade = function {...};' 당신이 코드는 아래와 같다 그래서와 함수는 ','그 코드가 자리에되면

//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 

* 당신은 ('slideshow.pause를 사용하여 일시 정지 기능을 호출 할 수 있습니다 ...', '이 후이 붙여 넣기) '또는'slidshowname .pause() '. 단지 'slideshow.auto()를 호출 다시 슬라이드 쇼를 재생합니다. **

을 당신이 ... jQuery를 또는 유일한 자바 스크립트를 통해 이미지에 마우스 오버 일시 정지 함수를 호출하려고 할 후 ...

Answer 3

은 내가 코드를 대체하지만 지금은 자동으로 슬라이드 사이 진행되지 않는 코드

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) 
    } 
},