JavaScript to achieve a simple picture scroll with the source code to download

2020-03-30 03:22:24
OfStack

Did you watch the focus game between Germany and Portugal last night? In the game in the early hours of Beijing time, cristiano ronaldo's Portugal 0-4 Germany was destroyed... He's the golden ball winner, the golden boot, the champions league winner, the heart of Portugal... What does cristiano ronaldo tell you about crying without tears

 
<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Scroll Image</title> 
<meta http-equiv="content-type" content="text/html;charset=utf-8"> 
<style type="text/css"> 
body 
{ 
font-size:12px; 
font-family: "Microsoft Yahei",' Microsoft jas black ','SimSun',' Song typeface '; 
margin: 0px; 
padding:0px; 
text-align: center; 
} 
img 
{ 
width: 150px; 
height: 150px; 
} 
.news_root 
{ 
width: 225px; 
height: 134px; 
text-align: left; 
margin: 0 auto; 
} 
div .news_header 
{ 
width: 243px; 
height: 16px; 
vertical-align: top; 
text-align: left; 
font-size: 14px; 
padding: 6px; 
} 
#scrollContainer 
{ 
width: 345px; 
margin: 2px 5px; 
overflow: hidden; 
text-align: left; 
} 
</style> 
</head> 
<body> 
<div class="news_root"> 
<div class="news_header">C Don't cry, come on </div> 
<div id="scrollContainer"> 
<div id="scrollContent"> 
<table border="0"> 
<tr align="middle"> 
<td id="firstCol"> 
<table border="0"> 
<tr> 
<td><img src="c1.jpg" alt="C ROM. Come on "></td> 
<td><img src="c2.jpg" alt="C ROM. Come on "></td> 
<td><img src="c3.jpg" alt="C ROM. Come on "></td> 
<td><img src="c4.jpg" alt="C ROM. Come on "></td> 
<td><img src="c5.jpg" alt="C ROM. Come on "></td> 
<td><img src="c6.jpg" alt="C ROM. Come on "></td> 
<td><img src="c7.jpg" alt="C ROM. Come on "></td> 
<td><img src="c8.jpg" alt="C ROM. Come on "></td> 
<td><img src="c9.jpg" alt="C ROM. Come on "></td> 
</tr> 
</table> 
</td> 
<td id="lastCol"></td> 
</tr> 
</table> 
</div> 
</div> 
</div> 
<script type="text/javascript"> 
var stopscroll = false; 
var scrollContHeight = 155; 
var scrollContWidth = 300; 
var scrollSpeed = 25; 

var scrollContainer = document.getElementById('scrollContainer'); 
var scrollContent = document.getElementById('scrollContent'); 
var firstCol = document.getElementById('firstCol'); 
var lastCol = document.getElementById('lastCol'); 

//Copy the contents of the first column to the second column to make the scrolling appear continuous
lastCol.innerHTML = firstCol.innerHTML; 
scrollContainer.style.width = scrollContWidth+"px"; 
scrollContainer.style.height = scrollContHeight+"px"; 
scrollContainer.noWrap = true; 
scrollContainer.onmouseover = new Function("stopscroll=true;"); 
scrollContainer.onmouseout = new Function("stopscroll=false;"); 

function init() 
{ 
scrollContainer.scrollLeft = 0; 
setInterval(scrollLeft1,scrollSpeed); 
} 
init(); 
var currleft = 0; 
function scrollLeft1() 
{ 
if(stopscroll == true) return; 
currleft = scrollContainer.scrollLeft; 
scrollContainer.scrollLeft += 1; 
if(currleft == scrollContainer.scrollLeft) 
{ 
scrollContainer.scrollLeft = 0; 
scrollContainer.scrollLeft += 1; 
} 
} 
</script> 
</body> 
</html></span>

(link: http://xiazai.jb51.net/201406/yuanma/scrollImg_jb51.net.rar)