JS picture Scrolling code:
<! 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=utf-8 "/>
<title> Untitled Document </title>
<style type= "Text/css" >
*{
padding:0px;
margin:0px;
}li{
height:150px;
width:200px;
Float:left;
margin:10px;
}ul{
width:880px;
height:170px;
List-style-type:none;
Background-color: #FFF;
Position:absolute;
left:0;
top:0;}
div{
width:880px;
height:170px;
margin-top:100px;
Margin-left:auto;
Margin-right:auto;
Background-color: #FF0000;
position:relative;
Overflow:hidden;
}</style>
<script>
var f=-1;//create a new global variable
function Le ()//Click left to call the method
{
F=-1;
}
function Re ()/click on the method called to the right
{
f=1;
}
window.onload=function () {
Odiv=document.getelementbyid (' div ');//Get Div
Oul=document.getelementbyid (' ul ');/Get UL
oul.innerhtml=oul.innerhtml+oul.innerhtml; Copy a part of the UL content
oul.style.width=oul.offsetwidth*2+ ' px '; the content of the UL is one times more than the original, so the width is one times more than the original
//Implement picture scrolling function
function cc () {
//Judge the position of the picture when it scrolls to the left
if (OUL.OFFSETLEFT<-OUL.OFFSETWIDTH/2)
{
oul.style.left=0+ ' px ';
}
Determine where the picture scrolls to the right
if (oul.offsetleft>0)
{
oul.style.left=-oul.offsetwidth/2+ ' px ';
}
//f is positive for the above global variable is negative to the left
oul.style.left=oul.offsetleft+f+ ' px ';
}
//Timer
var time=setinterval (cc,10);
Stop timer when
//mouse moves to div
odiv.onmouseover=function () {
clearinterval (time);
};
//mouse move out div when running timer
odiv.onmouseout=function () {
Time=setinterval (cc,10);
};};
</script><body>
<a href= "Javascript:le ()" > Left </a>
<a href= "Javascript:re ()" > Right </a>
<div id= "div" >
<ul id= "ul" >
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
Above two a label is to control the direction of picture scrollingThe key is the Div ul Li structure div inside is the ul person after is Li inside is the picture img tag
Let Li have a float and then give div add a left and right margin automatically give Div a relative positioning ul an absolute positioning
The overall layout is almost there.
Rolling the general idea is, through the CSS positioning and JS timer to change the left property of UL to achieve scrolling.
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
