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

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

　　代码

复制代码代码如下:

　　//图片浏览器容器

　　#container{position:absolute;}

　　#container img{position:absolute;}

　　//半透明遮罩层样式

　　.mask2{

　　background:#99FF00;

　　opacity:0.3;

　　filter:Alpha(Opacity='30');

　　position:absolute;

　　}

　　//颜色更深的半透明遮罩层样式

　　.mask{

　　background:#99FF00;

　　opacity:0.3;

　　filter:Alpha(Opacity='50');

　　position:absolute;

　　}

　　</style>

　　<body>

　　</div>

　　//图片列表数组

　　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;

　　//通过制定偏移量来显示数组顺序中的前或者后的几张图片，offset参数为偏移量

　　function showImg(offset){

　　base=(base-offset)%imgArray.length;

　　//显示从base号开始的5个图片

　　for(var i=base;i<base+5;i++){

　　var img = document.getElementById("img0"+(i-base+1));

　　//判断图片是否从前往后循环显示

　　if(i<0){img.src = imgArray[imgArray.length+i];}

　　//判断图片是否从后往前循环显示

　　else if(i>(imgArray.length-1)){img.src=imgArray[i-imgArray.length];}

　　else {img.src=imgArray[i];}

　　}

　　//初始化图片浏览器中的图片

　　function initImg(){

　　showImg(3);

　　}

　　//页面加载后调用

　　window.onload=initImg();

　　</script>

　　</body>

　　function initimg(){

　　showImg(3);

　　}

　　window.onload=initimg();

　　</script>

　　</body>

教程首页更多教程