in order to teach the need, sorted out the JS picture seamless scrolling code.
has always been copied online classic JS scrolling code, a slight change to become their own, is to explain, JS is how to let the pictures move up.
The following is the online source code, Baidu a lot of this kind, if you are to solve the actual effect of the display, please copy, do not need to look backwards.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Picture Scrolling </title>
<body>
<style type= "Text/css" >
<!--
#demo {
Background: #FFF;
Overflow:hidden;
border:1px dashed #CCC;
width:500px;
}
#demo img {
BORDER:3PX solid #F2F2F2;
}
#indemo {
Float:left;
width:800%;
}
#demo1 {
Float:left;
}
#demo2 {
Float:left;
}
-->
</style>
<div id= "Demo" >
<div id= "Indemo" >
<div id= "Demo1" >
<a href= "#" ></a>
<a href= "#" ></a>
<a href= "#" ></a>
<a href= "#" ></a>
<a href= "#" ></a>
<a href= "#" ></a>
</div>
<div id= "Demo2" ></div>
</div>
</div>
<script>
<!--
var speed=10;
var Tab=document.getelementbyid ("demo");
var Tab1=document.getelementbyid ("Demo1");
var Tab2=document.getelementbyid ("Demo2");
tab2.innerhtml=tab1.innerhtml;
function Marquee () {
if (tab2.offsetwidth-tab.scrollleft<=0)
Tab.scrollleft-=tab1.offsetwidth
else{
tab.scrollleft++;
}
}
var mymar=setinterval (marquee,speed);
Tab.onmouseover=function () {clearinterval (MyMar)};
Tab.onmouseout=function () {Mymar=setinterval (marquee,speed)};
-->
</script>
</body>
1, how to let the picture move up.
solve the problem of moving, must be related to time, JS mainly has two functions settimeout () and SetInterval (). Two functions of the difference, you can Baidu, General settimeout () to put into the body onload incident.
(1) Let div move first.
<style type= "Text/css" >
#imagelist {
}
</style>
<script language= "JavaScript" >
function Move () {
var Obj=document.getelementbyid ("ImageList");
obj.style.csstext= "position:relative;left:100px;";
}
</script>
<div id= "ImageList" >
Here, put some text, as long as you can demonstrate the effect of the lesson on it. As long as you can move, the logic behind it is believed that everyone will be able to solve ...
</div>
<a href= "#" onclick= "Move ()" > click let div movement </a>
Click on the text below, you can see the div moved a bit backward, OK, the following is a good solution.
(2) constantly click on the text link below, div constantly moving backwards yes. The code is as follows:
<script language= "JavaScript" >
var seq=0;
function Move () {
seq++;
var range=seq*20;
var Obj=document.getelementbyid ("ImageList");
obj.style.csstext= "Position:relative;left:" +range+ "PX;";
}
</script>
<div id= "ImageList" >
Here, put some text, as long as you can demonstrate the effect of the lesson on it. As long as you can move, the logic behind it is believed that everyone will be able to solve ...
</div>
<a href= "#" onclick= "Move ()" > click let div movement </a>
(3) Add settimeout () in the Move () function, realize recursive call of time function, call Move () function with onload event, all OK. , as to how to do picture scrolling, how to make scrolling more natural, do-it-yourself.
<body onload= "Move ()" >
<script language= "JavaScript" >
var seq=0;
function Move () {
seq++;
var range=seq*20;
var Obj=document.getelementbyid ("ImageList");
obj.style.csstext= "Position:relative;left:" +range+ "PX;";
SetTimeout ("Move ()", 100);
}
</script>
<div id= "ImageList" >
Here, put some text, as long as you can demonstrate the effect of the lesson on it. As long as you can move, the logic behind it is believed that everyone will be able to solve ...
</div>
</body>
2.ScrollLeft is what ghost. Why is this property online with setinterval () implementation scrolling it?
ScrollLeft is when the contents of the inside over the boundary, that is, the scroll bar, so that the contents of the left value of the change in the effect. That is, father and son two Div, to be able to use scrollleft to achieve scrolling, there is a prerequisite: a. The parent div overflow to hide. B. The child div must be wider than the parent div. This experiment can be combined with the above example to complete the modification.
setinterval () is to do what every time interval, as long as the call can be, not necessarily in the OnLoad event.
The following code in the style is necessary yo, otherwise can not move, you know, hehe.
<script language= "JavaScript" >
var seq=0;
function Move () {
var Obj=document.getelementbyid ("Outdiv");
obj.scrollleft++;
}
</script>
<body >
<script>
var s=setinterval (move,10);
</script>
<a href= "#" > Click </a>
<div id= "Outdiv" style= "width:200px; Overflow:hidden; " >
<div id= "Indiv" style= "width:400px; Float:left; " > here first put some text, as long as can demonstrate the effect of the lesson on it. As long as you can move, the logic behind it is believed that everyone will be able to solve ...
</div>
</div>
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
