PS: Display renderings, you can adjust the style of the picture according to your own needs
Code
< 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();