Web页面上无缝滚动的js代码

Web页面上无缝滚动的js代码
随便打开一个网页,主要看无缝滚动或旋转木马的身影,如淘宝的官方网站首页360
观察转盘图可以在图片中找到可以来回切换的循环,然后怎么办

旋转带或无缝滚动主要有两种方式,一种是通过图像的亮度变化到透明的地图来显示或隐藏图片,另一种是通过移动帧,将图片显示在观察区域。同样的事情将在这两种方式中使用,也就是计时器。

有两种定时器在Javascript中,1.setinterval(),2.settimeout(),有两种方法来关闭定时器,clearInterval()和()清除定时器。两种定时器的区别是,前者可以执行多次,后者只被执行一次。

这只是说无缝轧制,引入旋转木马图。

实现简单无缝滚动的代码如下所示:
完整的代码
div {位置:相对;宽度:630px;身高:220px;边界:固体2px黑;溢出:隐藏;}
UL {位置:绝对;顶部:10px;左:0;}
img {宽度:200px;高度:200px;浮动:左;右边距:10px;边界:2px固体黄色;}
李{样式表:无;边距:0;填充:0;}
边距:0;填充:0;}
窗口。指针函数(){
VaR,= document.getelementbyid(主要);
VaR阿里= oul.getelementsbytagname(IMG);
无功oinput = document.getelementsbytagname(输入){ 0 };
灵魂.innerHTML += oul.innerhtml;
灵魂。风格。宽度=长度*阿里。阿里{ 0 }。offsetwidth +PX;
var定时器= null;
setInterval(){()函数(
灵魂。风格。左=灵魂。offsetleft-8 +PX;
如果(OUL。offsetleft < -灵魂。offsetwidth / 2){
灵魂。风格。左=0px ;
}
},30);
};

----------------------------------------------------------------------------------------------------------------------------------------------------------- / /

无缝轧制的布局比较简单,下面是JS部分的主要讲解:

首先,获得UL和李,然后复制里面的内容修改UL,UL通过js动态宽度(如果你想做下一个无缝滚动,修改其宽度),最后打开定时器代码每30微秒UL的8像素左右,而UL一半少UL的总长度比左侧的视觉距离,这是0。因为电脑运行速度很快,它几乎感觉不到变化。我们看到的是,画面不断向左移动,无休止的运动。

上面的描述是关于Web页面上无缝滚动的JS代码。我希望能帮助你!

tag:无缝滚动页面代码电脑软件web

相关内容