JS seamless scrolling effect on almost any web page can see its figure, and some may be using plug-ins, in fact, using the original JavaScript relatively simple.
The main is the use of JS location knowledge.
1.innerHTML: Sets or gets the HTML tag of the element
2.scrollLeft: Sets or gets the left distance between the left edge of the object and the current visible content in the window
3.offsetWidth: Sets or gets the width of the specified label
4.setInterval (): Set method to start periodically
5.clearInterval (); Clear timer
Effect Chart:
Sneak Peek: Demo
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>javascript Scroll Production </title>
<body>
<style>
/*conment*/
*{
margin:0;
padding:0;
}
img{max-width:100%;}
. container{
max-width:620px;
margin:0 Auto;
padding-top:50px;
}
. Text-center{text-align:center;}
. List-inline li{
Display:inline-block;
}
. Hide{display:none;}
hr{
margin:20px 0;
}
. tag{
Background-color: #ccc;
padding:5px 0;
}
. Tag li{
Padding:0 10px;
border-left:1px solid #fff;
Cursor:pointer;
}
. Tag li:first-child{
Border-left:transparent;
}
. Tag li.active{
Background-color: #ddd;
}
. scroll{
position:relative;
padding:10px;
margin-bottom:20px;
Background-color: #ddd;
}
. wrap{
Overflow:hidden;
}
. content{
min-width:3000px;
height:200px;
}
. Content ul{
Float:left;
}
. Content UL li{
Display:inline-block;
max-width:200px;
}
#prev, #next {
width:50px;
height:50px;
Margin-top: -25px;
Background-color: #ccc;
line-height:50px;
Text-align:center;
Cursor:pointer;
}
#prev {
Position:absolute;
left:0;
top:50%;
border-radius:0 25px 25px 0;
}
#next {
Position:absolute;
right:0;
top:50%;
border-radius:25px 0 0 25px;
}
</style>
<div class= "Container" >
<H1 class= "Text-center" > Picture scrolling production <div class= "Scroll" >
<div class= "wrap" id= "wrap" >
<div id= "Content" class= "Content" >
<ul id= "List1" >
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
<ul id= "List2" >
</ul>
</div>
</div>
<div id= "Prev" >
Prev
</div>
<div id= "Next" >
Next
</div>
</div>
</div>
<script>
var Wrap=document.getelementbyid (' Wrap ');
var List1=document.getelementbyid (' List1 ');
var List2=document.getelementbyid (' List2 ');
var Prev=document.getelementbyid (' prev ');
var Next=document.getelementbyid (' Next ');
Create a copy of a list of content
list2.innerhtml=list1.innerhtml;
Scroll to the left loop
function Scroll () {
if (wrap.scrollleft>=list2.offsetwidth) {
wrap.scrollleft=0;
}
else{
wrap.scrollleft++;
}
}
Timer = setinterval (scroll,1);
Mouse stay using Clearinterval ()
Wrap.onmouseover=function () {
Clearinterval (timer);
}
Wrap.onmouseout=function () {
Timer = setinterval (scroll,1);
}
Acceleration to the left
function scroll_l () {
if (wrap.scrollleft>=list2.offsetwidth) {
wrap.scrollleft=0;
}
else{
wrap.scrollleft++;
}
}
Scroll Right
function Scroll_r () {
if (wrap.scrollleft<=0) {
Wrap.scrollleft+=list2.offsetwidth;
}
else{
wrap.scrollleft--;
}
}
Prev.onclick=function () {
Clearinterval (timer);
Change (0)
}
Next.onclick=function () {
Clearinterval (timer);
Change (1)
}
function Change (r) {
if (r==0) {
Timer = setinterval (scroll_l,60);
Wrap.onmouseout = function () {
Timer = setinterval (scroll_l,60);
}
}
if (r==1) {
Timer = setinterval (scroll_r,60);
Wrap.onmouseout = function () {
Timer = setinterval (scroll_r,60);
}
}
}
</script>
</body>
Very concise and practical code, the small partners according to their own project needs, appropriate landscaping can be.
