search

Home  >  Article  >  Web Front-end  >  JavaScript realizes seamless scrolling with left and right control_javascript skills

JavaScript realizes seamless scrolling with left and right control_javascript skills

WBOY
WBOYOriginal
2016-05-16 16:22:431353browse

Seamless scrolling is a special effect that is often used in projects. There are also many sample codes on the Internet. What I share here is a relatively simple and practical code with good compatibility. Friends, please study it carefully. Come on.

html code:

Copy code The code is as follows:

<html>
<head lang="en">
<meta charset="UTF-8">
<title>Seamless scrollingtitle>
<script src="js/0010.js">script>
<link rel="stylesheet" type="text/css" href="css/0010.css" />
head>
<body>
<a href="javascript:">Go lefta>
<a href="javascript:">Go righta>
<div id="div1">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                         div>
body>
html>



CSS code


Copy code

The code is as follows: *{ Margin:0; Padding: 0; }
#div1{
Overflow: hidden;
background: blue;
Position: relative;
Width: 600px;
height: 150px;
Margin:100px auto;
}
#div1 ul{
Position: absolute;
Left: 0px;
top: 0px;
List-style: none;
}
#div1 ul li{
float: left;
}
#div1 ul li img{
Width:150px;
height:150px;
}



js: code


Copy code

The code is as follows:

window.onload=function(){
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var timer=null;
var speed=2;//Control scrolling speed and direction
oUl.innerHTML=oUl.innerHTML oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length 'px';
Timer=setInterval(move,30);
oDiv.onmouseover=function(){//mouseover tentative
         clearInterval(timer);
};
oDiv.onmouseout=function(){//Mouse out and continue scrolling
        timer=setInterval(move,30);
}
Document.getElementsByTagName('a')[0].onclick=function(){
Speed=-2;
}
Document.getElementsByTagName('a')[1].onclick=function(){
Speed=2;
}
Function move(){//Picture scroll
If(oUl.offsetLeft<-oUl.offsetWidth/2){
              oUl.style.left=0;
}
If(oUl.offsetLeft>0){
              oUl.style.left=-oUl.offsetWidth/2 'px';
}
oUl.style.left=oUl.offsetLeft speed 'px';
}
}

Isn’t the effect great?

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：Javascript implements infinite select linkage menu_javascript skillsNext article：Javascript implements infinite select linkage menu_javascript skills

Related articles

See more