Home > Developer > Web Develop
Seamless scrolling:
1. Implementation principle: In a fixed-size div inside (Div needs to set Overfloow:hidden overflow part hidden!) Change the value of the offsetleft or offsetright of the picture! To achieve picture movement (need to add position:absolute to the picture)!
2. Change the value of left or right, you need to use the timer setinterval (called function, the time of the call)
3. When the left or right of the picture is greater than the length of the picture itself, it will appear blank! The solution is simply to copy one itself! When left or RIGHR is greater than or equal to the normal time, leave or right is re-assigned to a value of 0.
The code is as follows:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style type= "Text/css" >
#div1 {
width:100px;
height:100px;
Overflow:hidden;
}
li{
Float:left;
}
ul{
Position:absolute;
left:0px;
top:0px;
}
</style>
<body>
<div id= "Div1" >
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script type= "Text/javascript" >
var Oul=document.getelementbyid ("ul");
var s=5;//defined Speed
var fuzhi=oul.innerhtml+oul.innerhtml;
Oul.innerhtml=fuzhi;
Div1.onclick=function () {
Clearinterval (t);
T=setinterval (timer,30);
};
function timer () {
oul.style.left=oul.offsetleft-sudu+ "px";
if (oul.offsetleft<=-300) {oul.style.left=0;
}
</script>
The implementation of seamless scrolling on web pages
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
