带有白色旋转木马图形的本地js示例
CSS代码:
* {
保证金:0px;
填料:0px;
}
UL {
宽度:2500px;
身高:300px;
位置:绝对;
}
李{
浮点数:左;
列表样式:无;
}
img {
宽度:500px;
身高:300px;
}
div {
宽度:500px;
身高:300px;
保证金:50px汽车;
职位:相对;
溢出:隐藏;
}
白色
# round_ul {
宽度:300px;
身高:30px;
背景:黄色;
职位:相对;
保证金:250px汽车;
}
# round_ul李{
宽度:20px;
身高:20px;
边框半径:50%;
背景:# 2196f3;
左:50px保证金;
光标:指针;
}
HTML代码:
js的一部分:
执行代码页加载完成。
在window.onload =函数(){
获取
无功imgul = document.getelementsbytagname(UL){ 0 };
无功groundul = document.getelementbyid(round_ul );
第一个白色红色/红色的子节点(不是空节点)
groundul。孩子{ 0 }。style.backgroundcolor =红色;
var,x=0;
启动定时器功能
函数FN(){
SID = setInterval(ABC,10);
}
函数abc(){
/ /每10秒修改UL坐标,修改1px
imgul.style.left = X +PX;
如果图片完全进入div
如果(x % = 500 = 0){
修改函数调用/白色
如果(x = 2000){
x=0;
imgul.style.left = 0 +PX;
}
昌黎(Math.abs(X / 500)); / /改性白方法调用
ClearInterval(SID); / /临时计时器
setTimeout(fn,1000); / /每100毫秒第二定时器
}
}
(FN);
修改/白方法
函数昌黎(数字){
白色遍历阵列
对于(var x=0;x<4;x + +){
所有的点都变成了蓝色
groundul。孩子{X}。style.backgroundcolor =# 2196f3 ;
}
相应的改性白色红色
groundul。孩子{民}。style.backgroundcolor =红色;
}
}
这是它uff01 uff01do你懂吗
以上js与本机白色旋转木马图的例子都是小分享给大家,希望能给大家一个参考,希望大家支持。