Home > Web Front-end > JS Tutorial > JavaScript implements simple image scrolling with source code download_javascript skills

JavaScript implements simple image scrolling with source code download_javascript skills

WBOY
Release: 2016-05-16 16:43:59
Original
1142 people have browsed it

Did you watch the highlight battle between Germany and Portugal last night? In the early morning game of Beijing time, Portugal, led by Cristiano Ronaldo, was completely eliminated by Germany 0-4... He is the winner of the Golden Globe Award, the European Golden Boot, and the core of the Champions League champion. In the Portuguese team... 9 pictures of Cristiano Ronaldo tell you what it means Want to cry without tears

Copy code The code is as follows:




Scroll Image





Ronaldo, don’t cry, come on












< ;td>Come on Ronaldo






Come on Ronaldo Come on Ronaldo Come on Ronaldo Come on Ronaldo Come on Ronaldo Come on RonaldoCome on Ronaldo Come on Ronaldo





< 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 look 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;
}
}




Source code download
Related labels:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template