JavaScript类似闪光效果的立体图片浏览器

PS:显示效果图，大家可以根据自己的需求调整图片的样式哦

代码复制代码代码如下：样式类型='text/css' //图片浏览器容器# container { position :绝对值；} #容器img { position:absolute} //半透明遮罩层样式。mask 2 { background : # 99ff 00 opa city 33600.3 filter : alpha(不透明度=' 30 ');位置：绝对；} //颜色更深的半透明遮罩层样式。屏蔽{ background : # 99ff 00 opa city 33600.3 filter : alpha(不透明度=' 50 ');位置：绝对；} /style body div id='container '！-左箭头-img src=' http : J1。jpg ' style=' left :-25px；top:85px宽度' :50像素；height :50 px ' onclick=' JavaScript :应该mg(-1)'/！-左边第一个图片-img id=' img 01 ' style=' z-index :4；left :31 xtop :63 px宽度' :74 px'height :74 px ' onclick=' JavaScript : show mg(2)'/！-左边第一个图片的遮罩层-div class=' mask ' style=' z-index :4；left :31 xtop :63 px宽度' :74 px'高度：74px'/div！-左边第二个图片-img id=' img 02 ' style=' z-index :5；left :71 xtop :32 px宽度width :138 px ' height :138 px ' onclick=' JavaScript : show mg(1)'/！-左边第二个图片的遮罩层-div class=' mask 2 ' style=' z-index :5；left :71 xtop :32 px宽度宽度：138px '高度：138px'/div！-中间的图片-img id=' img 03 ' style=' z-index :6；left :151 xtop :0 px宽度width :198 px ' height :198 px ' onclick=' JavaScript :应该mg(0)'/！-右边第二个图片-img id=' img 04 ' style=' z-index :5；left :291 xtop :32 px宽度width :138 px ' height :138 px ' onclick=' JavaScript :应该mg(-1)'/！-右边第二个图片的遮罩层-div class=' mask 2 ' style=' z-index :5；left :291 xtop :32 px宽度宽度：138px '高度：138px'/div！-右边第一个图片-img id=' img 05 ' style=' z-index :4；left :395 xtop :64 px宽度：74 pxheight :74 px ' onclick=' JavaScript :应该mg(-2)'/！-右边第一个图片的遮罩层-div class=' mask ' style=' z-index :4；left :395 xtop :64 px宽度：74 px高度：74px'/div！-右箭头-img src=' http : J2。jpg ' style=' left :486 pxtop:85px宽度' :50像素；height :50 px ' onclick=' JAVAScript :应mg(1)'//div script//图片列表数组var imgArray=new Array()；imgArray[0]=' 1。jpg '；imgArray[1]=' 2。jpg '；imgArray[2]=' 3。jpg '；imgArray[3]=' 4。jpg '；imgArray[4]=' 5。jpg '；imgArray[5]=' 6。jpg '；imgArray[6]=' 7。jpg '；imgArray[7]=' 8。jpg '；imgArray[8]=' 9。jpg '；imgArray[9]=' 10。jpg '；//默认显示的图片序号var base=0；//通过制定偏移量来显示数组顺序中的前或者后的几张图片偏移参数为偏移量函数显示IMg(偏移量){ base=(base-offset)% IMgarray。长度；//显示从基础号开始的5个图片对于(var I=基数；ibase 5；I){ var img=文档。getelementbyid(' img 0 '(I-base 1))；//判断图片是否从前往后循环显示if(i0){ img。src=IMgarray[IMgarray。长度I]；} //判断图片是否从后往前循环显示否则如果我。length-1)){ img。src=IMgarray[I-IMgarray]。长度]；} else { img。src=IMgarray[I]；} } } //初始化图片浏览器中的图片函数init mg(){ show img(3)；} //页面加载后调用窗户。onload=Initimg()；/script/body函数init mg(){ show img(3)；}窗口。on load=init mg()；/脚本/正文