0

スライダー スクリプトを変更して、eBay のホームページのスライダーを模倣しました。マウスオーバーでスライドショーを一時停止できるようにコードを変更するほど Javascript に精通していません。どんな助けでも大歓迎です。

動作サンプルはhttp://camoshop.com/test.htmlにあります

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}
}();
4

3 に答える 3

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)
}
于 2012-06-20T17:58:56.580 に答える
1

誰かが TinyFader Web サイトに投稿した提案:

※一時停止ボタンについて質問された方は、「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()' または 'slideshowname .pause()' を使用して一時停止関数を呼び出すことができます。スライド ショーをもう一度再生するには、'slideshow.auto()' を呼び出すだけです。**

これを行った後... jQueryまたはjavascriptのみを使用して、画像ホバーで一時停止機能を呼び出してみてください...

自分で試してみて、あなたの経験を私たちに届けてください...

于 2012-06-20T19:28:28.617 に答える
0

fade.prototype.move関数を次のコードに置き換えます

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)
   }
},
于 2014-09-23T20:19:23.557 に答える