html轮播图片不显示不了,图片轮播的奇怪现象【图片显示不完整】

一时失言乱红尘 2022-10-09 05:52 291阅读 0赞

测试轮播

functiongetByClass(className,context){

context=context ||document;if(context.getElementsByClassName){returncontext.getElementsByClassName(className);

}var nodes=context.getElementsByClassName(‘*‘),

ret=[];for(var i=0;i

}returnret;

}functionhasClass(node,className){var names=node.className.split(/\s+/);for(var i=0;i

}return false;

}//下面是动画函数

/*参数说明

curTime:当前时间,即动画已经进行了多长时间,开始时间为0.

start:开始值。

dur:动画持续多长时间

alter:总的变化量*/

functionanimate(o,start,alter,dur,fx){var curTime=0;var t=setInterval(function(){if (curTime>=dur) clearTime(t);for(var i instart){

o.style[i]=fx(start[i],alter[i],curTime,dur)+”px”;

}

curTime+=50;

},50);

}functionLinear(start,alter,curTime,dur) {return start+curTime/dur*alter;

}//最简单的线性变化,也就是匀速运动

functionQuad (start,alter,curTime,dur) {return start+Math.pow(curTime/dur,2)*alter;

}//动画结束

(function(i){

btns[i].οnmοuseοver=function(){

clearTimeout(t);//scrollContent.style.top=(-i*260)+”px”;

var top=parseInt(scrollContent.style.top) || 0;

animate(scrollContent,{top:top},{top:(-i*260)-top},400,Quad)for(var j=0;j

btns[j].className=””;

}this.className=”hover”;

cur=this;

};

btns[i].οnmοuseοut=function(){

t=setTimeout(fn,2000);

}//移开鼠标

btns[i].index=i;

})(i);

}

btns[0].onmouseover();//对第一个执行动作

t=setTimeout(fn,2000); //停留2秒

functionfn(){var nextIndex=cur.index+1;if(nextIndex==btns.length){

nextIndex=0;

}

btns[nextIndex].onmouseover();

t=setTimeout(fn,2000);

}

};

![第1张][1]

![第2张][1]

![第3张][1]

![第4张][1]

![第5张][1]

  • 1
  • 2
  • 3
  • 4
  • 5

[1]:

发表评论

表情:
评论列表 (有 0 条评论,291人围观)

还没有评论,来说两句吧...

相关阅读

    相关 图片

    不管前端技术如何日新月异,有的需求总是不变的,比如图片轮播 那么如何实现呢? biubiu~思路来了! 首先,我们理一下需求: 界面上每次展示一张图片,间隔一段时间候展