我修改了一个滑块脚本来模仿主页上的ebay滑块。 我对Javscript不够熟悉,无法修改代码以允许幻灯片在鼠标悬停时暂停。任何帮助将不胜感激。
工作样本位于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}
}();
答案 0 :(得分: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)
}
答案 1 :(得分:1)
有人在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或javascript调用图像上的暂停功能...
亲自尝试并向我们提供您的体验......
答案 2 :(得分: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)
}
},