Home >Web Front-end >JS Tutorial >js practical non-stop scrolling effect (good compatibility)_image special effects

js practical non-stop scrolling effect (good compatibility)_image special effects

WBOYOriginal: 2016-05-16 18:25:281263browse

Here is a method; basically, the structure and behavior are separated. The connection between the two only requires one
id. It is very convenient to use, and the same js code can achieve multiple scrolling chart effects on this page. Without interfering with each other,
1.xhtml

Copy code The code is as follows:

< ;div class="demo" id="demo1">

< /tr>

Scroll 1

Scroll Chart 2

Scroll Chart 3

Scroll Figure 4

2.css

Copy code The code is as follows:

 
ul,li,img,td{font-size:12px;list-style-type:none;text-align:center;margin:0;padding:0;} 
.demo{width:230px;margin-bottom:8px;height:172px;overflow:hidden;} 
.demo ul{width:408px;clear:both;} 
.demo li{width: 102px;float:left;text-align:center;} 
.demo img{margin-bottom:8px;} 

3.js

Copy code The code is as follows:

 
function startmarquee(lh,speed,delay,index){ 
var o =document.getElementById("demo" index); 
var o_td=o.getElementsByTagName("td")[0]; 
var str=o_td.innerHTML; 
var newtd=document.createElement(" td"); 
newtd.innerHTML=str; 
o_td.parentNode.appendChild(newtd); 
var t; 
var p=false; 
o.onmouseover=function(){ p=true;} 
o.onmouseout=function() {p=false;} 
function start(){ 
t=setInterval(Marquee,speed); 
if(!p){ o.scrollLeft = 3;} 
} 
function Marquee(){ 
if(o_td.offsetWidth-o.scrollLeft<=0) 
o.scrollLeft-=o_td.offsetWidth; 
 else{ 
if(o.scrollLeft%lh!=0){ 
o.scrollLeft = 3 
}else{clearInterval(t); setTimeout(start,delay);} 
} 
} 
setTimeout(start,delay); 
} 
startmarquee(102,1,1500,1);//Stop scrolling between pictures
startmarquee(102,30,1,2) ;//Uninterrupted scrolling of images 

Test code: js needs to be executed after the html file is loaded to run normally, so remember to put js after the div; the principle of image scrolling and text scrolling Much the same.
Demo code:

<style type="text/css"></style>
<div class="demo" id="demo1">
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<ul>
<li>
<img  src="http://www.jb51.net/img.jpg" alt="js practical non-stop scrolling effect (good compatibility)_image special effects" ><table cellpadding="0" cellspacing="0"> 
<tbody> 
<tr> 
<td> 
<ul> 
<li>
<img  src="http://www.jb51.net/img.jpg" alt="js practical non-stop scrolling effect (good compatibility)_image special effects" ><br>滚动图1</li> 
<li>
<img  src="http://www.jb51.net/img.jpg" alt="js practical non-stop scrolling effect (good compatibility)_image special effects" ><br>滚动图2</li> 
<li>
<img  src="http://www.jb51.net/img.jpg" alt="js practical non-stop scrolling effect (good compatibility)_image special effects" ><br>滚动图3</li> 
<li>
<img  src="http://www.jb51.net/img.jpg" alt="js practical non-stop scrolling effect (good compatibility)_image special effects" ><br>滚动图4</li> 
</ul> 
</td> 
</tr> 
</tbody> 
</table>Scroll Chart 1</li>
<li>
<img  src="http://www.jb51.net/img.jpg" alt="js practical non-stop scrolling effect (good compatibility)_image special effects" ><script type="text/javascript" language="JavaScript">// <![CDATA[ 
function startmarquee(lh,speed,delay,index){ 
var o=document.getElementById("demo"+index); 
var o_td=o.getElementsByTagName("td")[0]; 
var str=o_td.innerHTML; 
var newtd=document.createElement("td"); 
newtd.innerHTML=str; 
o_td.parentNode.appendChild(newtd); 
var t; 
var p=false; 
o.onmouseover=function(){p=true;} 
o.onmouseout=function() {p=false;} 
function start(){ 
t=setInterval(Marquee,speed); 
if(!p){o.scrollLeft += 3;} 
} 
function Marquee(){ 
if(o_td.offsetWidth-o.scrollLeft<=0) 
o.scrollLeft-=o_td.offsetWidth; 
else{ 
if(o.scrollLeft%lh!=0){ 
o.scrollLeft+= 3 
}else{clearInterval(t); setTimeout(start,delay);} 
} 
} 
setTimeout(start,delay); 
} 
startmarquee(102,1,1500,1); 
startmarquee(102,30,1,2); 
// ]]></script>Scroll Chart 2</li>
<li>
<img  src="http://www.jb51.net/img.jpg" alt="js practical non-stop scrolling effect (good compatibility)_image special effects" >Scroll Figure 3</li>
<li>
<img  src="http://www.jb51.net/img.jpg" alt="js practical non-stop scrolling effect (good compatibility)_image special effects" >Scroll Figure 4</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
<div class="demo" id="demo2">
<table cellpadding="0" cellspacing="0"> 
<tbody> 
<tr> 
<td> 
<ul> 
<li>
<img  src="http://www.jb51.net/img.jpg" alt="js practical non-stop scrolling effect (good compatibility)_image special effects" ><br>滚动图1</li> 
<li>
<img  src="http://www.jb51.net/img.jpg" alt="js practical non-stop scrolling effect (good compatibility)_image special effects" ><br>滚动图2</li> 
<li>
<img  src="http://www.jb51.net/img.jpg" alt="js practical non-stop scrolling effect (good compatibility)_image special effects" ><br>滚动图3</li> 
<li>
<img  src="http://www.jb51.net/img.jpg" alt="js practical non-stop scrolling effect (good compatibility)_image special effects" ><br>滚动图4</li> 
</ul> 
</td> 
</tr> 
</tbody> 
</table>
</div>

[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute

]
In the code, it is for 102 The width of the picture can be modified in the code. Only the width that suits your picture size can run perfectly.

Statement：

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

Previous article：Array.prototype.slice using extension_javascript tipsNext article：Array.prototype.slice using extension_javascript tips

Related articles

See more

< img src="img.jpg">

Scroll 1

Scroll Chart 2

Scroll Chart 3

Scroll Figure 4