本文为大家分享一个javaｓｃｒｉｐｔ图片幻灯片效果的实现方法，具体内容如下，先看看地图效果：
鼠标滑过地图，显示完整的图片，移除被重置。
简单的CSS加js操作DOM实现：
滑动门
Css：
{ #容器
身高：477px；
保证金：0汽车；
边境：1px solid # CCC；
底部边框：1px solid # CCC；
溢出：隐藏；
职位：相对；
}
#容器{ IMG
位置：绝对；
显示块；
左：0；
左边界：1px solid # CCC；
}
js操作：
在window.onload =函数（）{
容器对象
VaR箱= document.getelementbyid（'container'）；
/ /获得物品的图片收藏列表
VaR IMGS = box.getelementsbytagname（'img）；
/单个图片宽度
无功imgwidth = IMGS { 0 }。offsetwidth；
门体暴露在隐藏的/设置的宽度上。
无功exposewidth = 180；
容器/集合的总宽度
VaR的颜色= imgwidth +（imgs.length - 1）* exposewidth；
box.style.width =颜色+ 'px；
每个门的初始位置
功能setimgspos（）{
对于（var i = 1，len = imgs.length；我< len；i++）{
IMGS {我}。style.left = imgwidth + exposewidth *（I - 1）+ 'px；
}
}
SetImgsPos（）；
计算应打开每扇门/移动距离。
翻译= imgwidth - exposewidth VaR；
对于每个门/绑定事件
对于（var i = 0，len = imgs.length；我< len；i++）{
使用函数表立即调用应答，以获得不同的i值。
（函数（i）{）
IMGS {我}。onmouseover =函数（）{
每个门/第一复位
SetImgsPos（）；
打开门
对于（var j＝1；j < i；j + +）{
IMGS { J }。style.left = parseInt（IMGS {，}。style.left，10）翻译+ 'px；
/ / IMGS { J }。style.left = J×exposewidth +PX；
}
}；
IMGS {我}。onmouseout=函数（）{
SetImgPos（）；
}；
}）（一）；
}
}；
希望本文能帮助您学习Javaｓｃｒｉｐｔ程序设计。