灵活使用数组进行图片切换js实现
js动态数组制作图片切换效果，供大家参考，详情如下数组元素位置变换：
将内容分成数组，将第一个添加到最后，删除第一个数组。
1、2、3、4
窗口。指针函数（）{
无功odiv = document.getelementbyid（'box）；
无功oinput = document.getelementbyid（输入的）；
oinput。onclick =函数（）{
var arr = odiv.innerhtml.split（'，'）；
/ / console.log（ARR）；
Arr.push（ARR { 0 }）； / /将是最后的第一，删除第一个
Arr.shift（）；
ODiv。innerHTML = ARR；
}
}
模拟图像切换效果：
窗口。指针函数（）{
VaR艾迪维= document.getelementsbytagname（'div）；
无功ainput = document.getelementsbytagname（输入的）；
var arr = {}； / /创建一个空数组存储属性
对于（var i = 0；i < adiv.length；i++）{
Console.dir（（艾迪维getstyle {我}，右））； / /得到最终的纯净的风格
与属性或数组的数组，可以使用多个属性
Arr.push（（艾迪维{我} { getstyle，getstyle（艾迪维右），{我}，' '））））；
}
/ / console.dir（ARR）；
（ainput { 0 }。onclick=功能）{ / /将是最后的第一，删除第一个
Arr.push（ARR { 0 }）；
Arr.shift（）；
对于（var i = 0；i < adiv.length；i++）{ / /手术后通过重新分配数组
艾迪维{我}。风格。左= ARR {我} { 0 }；
艾迪维{我}。风格。= ARR {我} { 1 }；
}
}；
（ainput { 1 }。onclick=功能）{ / /将持续到年底，删除
Arr.unshift（ARR { arr.length-1 }）；
Arr.pop（）；
对于（var i = 0；i < adiv.length；i++）{
艾迪维{我}。风格。左= ARR {我} { 0 }；
艾迪维{我}。风格。= ARR {我} { 1 }；
}
}；
功能getstyle（obj，ATTR）得到最终的{ / /风格
如果（obj。currentstyle）{
返回的对象。currentstyle {属性}；
其他{ }
返回getcomputedstyle（obj，false）{属性}；
}
}
}
基本效果图：
例版：
思想:
如果有五张图片：图1 ~ 5左的值是：20px，60px，100px，240px，380px；
点击后切换左键，相应的图1 ~ 5left值改为：60px，100px，240px，380px，20px；
--------------------------------------------------------------------------------
这组的数组的第一个元素移动到结束：20px，60px，100px，240px，380px，20px；
然后删除第一个元素：60px，100px，240px，380px，20px；
所以在uff1a
示例布局：
实例的风格：
#箱{宽度：700px；身高：300px；位置：相对；保证金：20px汽车；文本对齐：中心；}
#盒UL {列表样式：无；}
#箱ul {位置：绝对的；}
#箱ul。pos_0 {顶：50px；左：20px；Z指数：1；不透明度：0.5；}
#箱ul。pos_1 {顶：20px；左：60px；Z指数：2；不透明度：0.8；}
#箱ul。pos_2 {顶：0px；左：100px；Z指数：3；不透明度：1；}
#箱ul。pos_3 {顶：20px；左：240px；Z指数：2；不透明度：0.8；}
#箱ul。pos_4 {顶：50px；左：380px；Z指数：1；不透明度：0.5；}
。目录{显示：内联块；宽度：45px；身高：100px；背景：URL（'images /按钮。png）不重复；
位置：绝对；顶部：60px；Z指数：4；}
。女孩{背景位置：0px 0；左：40px；}
{背景。迪尔位置：- 55px 0；右：40px；}
JS代码：
窗口。指针函数（）{
乏术= document.getelementsbyclassname（'dir）{ 0 }；
无功onext = document.getelementsbyclassname（'dir）{ 1 }；
VaR阿里= document.getelementsbytagname（李的）；
var arr = { }；
对于（var i = 0；i < ali.length；i++）{
无功oimg =阿里{我}。getElementsByTagName（'img）{ 0 }；
/ / console.log（getstyle（阿里{我}，右））；
/ / console.log（parseInt（getstyle（阿里{我}，'opacity '）* 100））；
/ / console.log（getstyle（阿里{我}，'z-index '））；
/ / console.log（oimg。宽度）；
Arr.push（{
ParseInt（getstyle（阿里{我}，' '）），
ParseInt（getstyle（阿里{我}，'opacity '）* 100），
ParseInt（getstyle（阿里{我}，'z-index '）），
oimg.width
}）；
/ / console.log（ARR {我} { 2 }）；
}
/ / console.dir（ARR）；
OPre。onclick=功能（左）{ / /
Arr.push（ARR { 0 }）；
Arr.shift（）；
对于（var i = 0；i < ali.length；i++）{
无功oimg =阿里{我}。getElementsByTagName（'img）{ 0 }；
/ / console.log（ARR {我} { 2 }）；
startmove（阿里{我}，{
Left:arr{i}{0},
上图：ARR {我} { 1 }，
不透明度：ARR {我} { 2 }，
}）；
ALi{i}.style.zIndex=arr{i}{3};
startmove（oimg，{宽度：ARR {我} { 4 } }）；
}
}；
onext。onclick=功能（右）{ / /
Arr.unshift（ARR { arr.length-1 }）；
Arr.pop（）；
对于（var i = 0；i < ali.length；i++）{
无功oimg =阿里{我}。getElementsByTagName（'img）{ 0 }；
startmove（阿里{我}，{
左：ARR {我} { 0 }，
上图：ARR {我} { 1 }，
不透明度：ARR {我} { 2 }，
}）；
ALi {我}。风格。在= ARR {我} { 3 }；
startmove（oimg，{宽度：ARR {我} { 4 } }）；
}
}；
功能getstyle（obj，ATTR）与数值{ / /单位获得
如果（obj。currentstyle）{
返回的对象。currentstyle {属性}；
其他{ }
返回getcomputedstyle（obj，false）{属性}；
}
}
}
设计素描 uff1a
以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。