1. Overview
Scrolling images in a loop can not only add dynamic effects to the web page, but also save page space and effectively ensure that more pictures are displayed on limited pages.
2. Technical points
The main method is used to achieve the loop scrolling effect of the picture. The syntax format of the setTimeout() method is as follows:
setTimeout(function,milliseconds,[arguments])
Parameter description:
a. function: The name of the JavaScript custom function to be called.
b. Milliseconds: Set the timeout time in milliseconds.
Function: After the timeout time is over, the function is called. This value can be cleared with the clearTimeout() function.
3. Specific implementation
(1) Add a <div> tag with id attribute demo at the appropriate position of the page, and add a table and the picture to be displayed in the tag. The key code is as follows:
<div id="demo" style=" overflow: hidden; width: 455px; height: 166px;"><table cellpacing="0" cellpadding="0"><tr><td valign="top" id="marquePic1"><!-- Picture to scroll--><table align="center" cellpadding="0" cellpacing="0" ><tr align="center"><%for(int i=1;i<8;i++){%><td> <img src="Images/<%=i%>.jpg"> </td><%}%></tr></table></td><td id="marquePic2"></td></tr></table></div>(2) Write a custom JavaScript function move() to achieve uninterrupted image loop scrolling effect. The larger the speed value, the faster the picture scrolls. The specific code is as follows:
<script language="javascript">var speed=30; //Set the interval time marquePic2.innerHTML=marquePic1.innerHTML;var demo=document.getElementById("demo"); //Get demo object function Marquee(n){ //Method for realizing image loop scrolling if(marquePic1.offsetWidth-demo.scrollLeft<=0){ demo.scrollLeft=0; }else{ demo.scrollLeft=demo.scrollLeft+n;} } var MyMar=setInterval("Marquee(5)",speed);demo.onmouseover=function() { //Stop scrolling clearInterval(MyMar);} demo.onmouseout=function() { //Continue scrolling MyMar=setInterval("Marquee(5)",speed);}</script>The above is the relevant knowledge about JavaScript code that the editor introduced to you to realize the image loop scrolling effect. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!