Community Learn Tools Library Leisure

English

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

WBOY

Release： 2016-05-16 18:25:28

Original

1268 people have browsed it

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.

Related labels：

无间断滚动图

source：php.cn

Previous article：Array.prototype.slice using extension_javascript tips Next article：Dynamically add code to js word table_javascript skills

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

Latest Articles by Author

What is a NullPointerException, and how do I fix it?

2024-10-22 09:46:29
From Novice to Coder: Your Journey Begins with C Fundamentals

2024-10-13 13:53:41
Unlocking Web Development with PHP: A Beginner's Guide

2024-10-12 12:15:51
Demystifying C: A Clear and Simple Path for New Programmers

2024-10-11 22:47:31
Unlock Your Coding Potential: C Programming for Absolute Beginners

2024-10-11 19:36:51
Unleash Your Inner Programmer: C for Absolute Beginners

2024-10-11 15:50:41
Automate Your Life with C: Scripts and Tools for Beginners

2024-10-11 15:07:41
PHP Made Easy: Your First Steps in Web Development

2024-10-11 14:21:21
Build Anything with Python: A Beginner's Guide to Unleashing Your Creativity

2024-10-11 12:59:11
The Key to Coding: Unlocking the Power of Python for Beginners

2024-10-11 12:17:31

Latest Issues

Submit form without button using Javascript/Jquery I'm trying to submit a form without a button by calling a JavaScript function and executin...

From 2024-04-06 14:54:03

0

2

421

Align tooltip to relative parent I spent two days trying to solve this problem but I realized I couldn't do it alone. I'm t...

From 2024-04-06 13:16:59

0

2

394

next not working properly in middleware using Nodejs I am working with Nodejs and using expressjs and now I am working on middleware functional...

From 2024-04-04 17:33:56

0

1

340

Authserver "Unable to connect" "Host xxxxx is not authorized" after changing the LAN installation IP Use the default Windows installation instructions on a bare metal Windows 10 installation....

From 2024-04-04 15:06:41

0

1

374

Efficient way to fill missing values in unordered map from SQL table (SQL/C++) Question Currently there is a system that reads unique identifiers (ids) and their attache...

From 2024-04-04 11:47:44

0

1

345

Related Topics

More>

Popular Recommendations

Popular Tutorials

More>

Related Tutorials

Popular Recommendations

Latest courses

Latest Downloads

More>

Web Effects

Website Source Code

Website Materials

Front End Template

< img src="img.jpg">

Scroll 1

Scroll Chart 2

Scroll Chart 3

Scroll Figure 4