Home > Web Front-end > JS Tutorial > JavaScript three-dimensional picture browser with flash-like effect_image special effects

JavaScript three-dimensional picture browser with flash-like effect_image special effects

WBOY
Release: 2016-05-16 18:34:54
Original
995 people have browsed it

PS: Display renderings, you can adjust the style of the picture according to your own needs

Code

Copy code The code is as follows:















< img id="img03" style="z-index:6; left:151px; top:0px; width:198px; height:198px;" onclick="JavaScript:showImg(0)"/>
< !--The second picture on the right-->




< img id="img05" style="z-index:4; left:395px; top:64px; width:74px; height:74px;" onclick="JavaScript:showImg(-2)"/>
< ;!--The mask layer of the first image on the right-->




<script> <br>//Image list array<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>// The picture sequence number displayed by default <br>var base = 0; <br>//Show the previous or next pictures in the array sequence by specifying the offset. The offset parameter is the offset <br>function showImg(offset ){ <br>base=(base-offset)%imgArray.length; <br>//Display 5 pictures starting from the base number<br>for(var i=base;i<base 5;i ){ <BR>var img = document.getElementById("img0" (i-base 1)); <BR>//Determine whether the image is displayed in a loop from front to back<BR>if(i<0){img.src = imgArray[imgArray .length i];} <BR>//Determine whether the picture is displayed in a loop from back to front<BR>else if(i>(imgArray.length-1)){img.src=imgArray[i-imgArray.length]; } <br>else {img.src=imgArray[i];} <br>} <br>} <br>//Initialize the image in the image browser <br>function initImg(){ <br>showImg(3 ); <br>} <br>//Call after the page is loaded <br>window.onload=initImg(); <br></script>

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


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template