js实现一个简单的图片旋转木马效果

本文介绍了js实现图片旋转木马的简单示例效果。供大家分享，供大家参考：

在这里使用js，创建一个简单的图片旋转木马效果：

制作比较粗糙，图片的使用是宽度：660ppx，身高：550px；

结果如下：



代码部分如下所示：






js幻灯片代码

在window.onload =函数（）{
标志＝0；
以此为document.getelementbyid（滑块）；
obj2 = document.getelementsbytagname（礼）；
obj2 { 0 }。style.backgroundcolor =# 666666 ；
默认情况下会选择颜色。
时间= setInterval（（）；
obj1.onmouseover =函数（）{
ClearInterval（时间）；
}
obj1.onmouseout =函数（）{
时间= setInterval（（）；
}

对于（VAR num = 0；民< obj2.length；数+ +）{
obj2 {民}。onmouseover =函数（）{
把（这个innerHTML）；
ClearInterval（时间）；
}
obj2 {数量}。onmouseout=函数（）{
时间= setInterval（（）；
}
}
延迟加载图片，演示时间，使用本地图片
请更改为两个行/域提供的图片。
document.getelementbyid（二）。src=图片 / 2。png；
使用660 / 550的图片宽度。
document.getelementbyid（第三）。src=图片 / 3。png；
document.getelementbyid（四）。src=图片 / 4。png；
}
函数转（值）{
如果（值）！= NULL）{
标志=值- 2；
}
如果（旗< obj2.length - 1）
旗帜+；
其他的
标志＝0；
obj1.style.top =标志*（550）+PX；
对于（var j = 0；J < obj2.length；j++）{
obj2 { J }。style.backgroundcolor =# ffffff ；
}
obj2 {旗}。style.backgroundcolor =# 666666 ；
}


#包
{
身高：550px；
宽度：660px；
溢出：隐藏；
职位：相对；
溢出：隐藏；
}
#包UL
{
列表样式：无；
位置：绝对；
上图：500px；
左：450px；
}
#包李
{
左：2px保证金；
不透明性：3；
滤镜：alpha（不透明度= 30）；
文本对齐：中心；
行高：30px；
字体大小：20px；
身高：30px；
宽度：30px；
背景颜色：# FFF；
浮点数：左；
边界半径：3px；
光标：指针；
}
#滑块
{
位置：绝对；
上图：0px；
左：0px；
}
#滑块IMG
{
浮点数：左；
边界：无；
}











一
二
三
四






希望本文能对大家的javaｓｃｒｉｐｔ程序设计有所帮助。