这个例子为大家分享js实现图片切换的效果，供大家参考，具体内容如下
js实现点击按钮，图片切换效果：
结构：使用具有固定宽度和高度的div来完成容器的外层，并将溢出设置为隐藏。
然后内img_box设置宽度的四倍，相同高度的框的宽度，也就是说含有四的IMG img_box，但只有一个，以下两个div，左和右是作为单击按钮可以切换图片，切换图片是改变img_box留下的财产，所以img_box应设置为绝对定位，为了方便，箱体的位置设置的关系，这是img_box箱相对定位。四图片设置浮动是左，和宽度和高度，相同的盒子。
CSS代码：
* {
保证金：0；
填充：0；
}
箱{。
宽度：800px；
身高：400px；
保证金：20px汽车；
职位：相对；
溢出：隐藏；
}
img_box {。
身高：400px；
宽度：3200px；
位置：绝对；
过渡：0.5s -moz；
WebKit的过渡：0.5s；
}
img {
宽度：800px；
身高：400px；
浮点数：左；
}
开关{。
宽度：200px；
身高：100%；
位置：绝对；
}
#左{
左：0px；
上图：0px；
背景：-moz线性梯度（左，RGBA（84, 84, 84，0.50），（20%，20%，20%的效果，0））；
背景：WebKit的线性梯度（左，RGBA（84, 84, 84，0.50），（20%，20%，20%的效果，0））；
}
#右{
右：0px；
上图：0px；
背景：-moz线性梯度（左，RGBA（20%，20%，20%，0），（84, 84，84,0.5 RGBA））；
背景：WebKit的线性梯度（左，RGBA（20%，20%，20%，0），（84, 84，84,0.5 RGBA））；
}
#左：悬停{
背景：-moz线性梯度（左，RGBA（0, 0，0），（20%，20%，20%的效果，0））；
背景：WebKit的线性梯度（左，RGBA（0, 0，0），（20%，20%，20%的效果，0））；
}
#右：悬停{
背景：-moz线性梯度（左，RGBA（20%，20%，20%，0），RGBA（0, 0，0））；
背景：WebKit的线性梯度（左，RGBA（20%，20%，20%，0），RGBA（0, 0，0））；
}
左、右使用渐变背景色和透明度的属性。他们只说Firefox和WebKit浏览器，现在一些IE浏览器是IE和Webkit双内核，如360安全浏览器。
背景：-moz线性梯度（左，RGBA（84, 84, 84，0.50），（20%，20%，20%的效果，0））；
背景：WebKit的线性梯度（左，RGBA（84, 84, 84，0.50），（20%，20%，20%的效果，0））；
为了使转换顺利过渡，添加了过渡属性：
过渡：0.5s -moz；
WebKit的过渡：0.5s；
JS代码：
VaR的盒子；
var计数= 1；
窗口。指针函数（）{
箱= document.getelementbyid（img_box ）；
VaR左= document.getelementbyid（左）；
VaR对= document.getelementbyid（权利）；
Left.addEventListener（单击
right.addeventlistener（单击
Document.body.addEventListener（鼠标悬停
}
功能_right（）{
var = 0；
如果（计数< 4）{
计数= 800；
其他{ }
DIS = 0；
计数= 0；
}
框。样式；
计数= 1；
}
功能_left（事件）{
var = 0；
如果（计数> 1）{
DIS =（2-count）* 800；
其他{ }
DIS = 3 * 800；
数= 5；
}
框。样式。左；
计数= 1；
}
使用全局变量计数记录当前显示的图片。当你点击切换按钮时，计数应该根据照片的数量来计算。然后计算并设置img_box左属性。
以上是介绍js实现的图片切换效果代码，希望能帮助您实现图片切换效果。