JavaScript realizes seamless scrolling with left and right control

JavaScript realizes seamless scrolling with left and right control_javascript skills

WBOY

Release： 2016-05-16 16:22:43

Original

1374 people have browsed it

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?