JavaScript code for circular scrolling of pictures

1. Overview

Scrolling pictures in a loop not only adds a dynamic effect to the Web page, but also saves page space and effectively ensures that more pictures are displayed on a limited page.

2. Technical Essentials

setTimeout() method is mainly used to achieve the circular scrolling effect of pictures.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 timeout, call function.This value can be cleared with the clearTimeout() function.

3. Specific implementation

(1) Add an id attribute of demo at the appropriate location on the page < div > Mark and add a table and a picture to scroll through.The key codes are as follows:

<div id="demo" style=" overflow: hidden; width: 455px; height: 166px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" id="marquePic1">
<!--  Pictures to scroll through  -->
<table width="455" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr align="center">
<%for(int i=1;i<8;i++){%>
<td> <img src="Images/<%=i%>.jpg" width="118" height="166" border="1"> </td>
<%}%>
</tr>
</table>
</td>
<td id="marquePic2" width="1"></td>
</tr>
</table>
</div> 

(2) Write a custom JavaScript function, move(), to achieve uninterrupted picture scrolling effect.The larger the speed value, the faster the picture scrolls. The code is as follows:

<script language="javascript">
var speed=30 ; // Set Interval Time 
marquePic2.innerHTML=marquePic1.innerHTML;
var demo=document.getElementById("demo"); // Obtain demo object 
function Marquee(n){ // Method of achieving circular scrolling of pictures 
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>

Knowledge point supplement: javascript implements automatic cyclic scrolling of pages

First html code

<div id="content">
<ol id="EG-CN-1">EG-CN-1
<li type="none">aatox</li>
<li type="none">akari</li></ol>
<ol id="EG-CN-10">EG-CN-10<li type="none">rakan</li></ol>
<ol id="EG-CN-7">EG-CN-7<li type="none">riven</li>
<li type="none">darius</li></ol>
<ol id="EG-CN-8">EG-CN-8<li type="none">fiora</li>
<li type="none">jayce</li>
<li type="none">noc</li></ol>
<ol id="EG-CN-2">EG-CN-2<li type="none">leesin</li></ol></div>

This is an div container that automatically adds list via js and will automatically increase as the list length increases scrollheight The whole div is fixed width and height, and the extra content is automatically hidden in scrollview by overflow:scroll attribute of css
The css code is as follows and used here together: -webkit-scrollbar Hide scrollbars for aesthetics

#content{
 width:430px;height:490px;
 position:absolute; top:180px;left:40%;
 font-size:20px;overflow:scroll;

}
#content::-webkit-scrollbar{display:none}
ol{font-size:35px}
li{font-size:25px}

Next is the js code for auto-cyclic scrolling

The principle is to first read the height of the div element and the height of the content inside div. clientHeight and scrollHeight Property to determine the maximum distance from the scrollbar to the top h=clientHeight-scrollHeight , then use setInterval to increment the distance of the scrollbar to the top of the scrollTop attribute from 0 to the maximum distance of h, and then zero scrollTop to start scrolling again

$(document).ready(function(){
content=document.getElementById('content')
clientheight=content.clientHeight
offsetheight=content.scrollHeight
h=offsetheight-clientheight
var position=0
function startscroll(){
if(content.scrollTop<h){position++;content.scrollTop=position}
if(content.scrollTop>=h){content.scrollTop=0;position=0}
}
setInterval(startscroll,100)

console.log(clientheight)
console.log(offsetheight)

})

summary