Heim  >  Artikel  >  Web-Frontend  >  JavaScript 类似flash效果的立体图片浏览器_图象特效

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

WBOY
WBOYOriginal
2016-05-16 18:34:54972Durchsuche

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

代码

复制代码 代码如下:





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

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



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



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

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



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



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

<script> <BR>//图片列表数组 <BR>var imgArray = new Array(); <BR>imgArray[0]="1.jpg"; <BR>imgArray[1]="2.jpg"; <BR>imgArray[2]="3.jpg"; <BR>imgArray[3]="4.jpg"; <BR>imgArray[4]="5.jpg"; <BR>imgArray[5]="6.jpg"; <BR>imgArray[6]="7.jpg"; <BR>imgArray[7]="8.jpg"; <BR>imgArray[8]="9.jpg"; <BR>imgArray[9]="10.jpg"; <BR>//默认显示的图片序号 <BR>var base = 0; <BR>//通过制定偏移量来显示数组顺序中的前或者后的几张图片,offset参数为偏移量 <BR>function showImg(offset){ <BR>base=(base-offset)%imgArray.length; <BR>//显示从base号开始的5个图片 <BR>for(var i=base;i<base+5;i++){ <BR>var img = document.getElementById("img0"+(i-base+1)); <BR>//判断图片是否从前往后循环显示 <BR>if(i<0){img.src = imgArray[imgArray.length+i];} <BR>//判断图片是否从后往前循环显示 <BR>else if(i>(imgArray.length-1)){img.src=imgArray[i-imgArray.length];} <BR>else {img.src=imgArray[i];} <BR>} <BR>} <BR>//初始化图片浏览器中的图片 <BR>function initImg(){ <BR>showImg(3); <BR>} <BR>//页面加载后调用 <BR>window.onload=initImg(); <BR></script>

function initimg(){
showImg(3);
}
window.onload=initimg();

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn