验证中...
私信发送成功
片段 1 片段 2
gistfile1.txt
原始数据 复制代码
window.onload=function(){
var timer = null;
//设置图片向左和向右
var speen = -1;//-1是向左,1向右,并且设置快慢
//获取ul对象和li对象
var getUL = document.getElementsByTagName("ul")[0];
var getLi = document.getElementsByTagName("li");
//设置ul的宽度
getUL.innerHTML=getUL.innerHTML+getUL.innerHTML;
getUL.style.width=getLi[0].offsetWidth*getLi.length+"px";
timer = setInterval(move,30)
//滚动的方法 move
function move(){
//判断 如果ul向左移动一半的时候就给ul添加ul
if(getUL.offsetLeft<-getUL.offsetWidth/2)
{
getUL.style.left="0";
}
//判断向右移动的时候,设置往ul添加图片
if(getUL.offsetLeft>0){
getUL.style.left=-getUL.offsetWidth/2+"px";
}
//向左移动
getUL.style.left=getUL.offsetLeft+speen+"px";
}
//鼠标移动上去,停止自动滚动
getUL.onmouseover=function(){
clearInterval(timer);
}
//鼠标移开后,自动启用滚动
getUL.onmouseout=function(){
timer = setInterval(move,30)
}
//向左滚动
document.getElementById("left").onclick=function(){
speen = -1;
}
//向右滚动
document.getElementById("right").onclick=function(){
speen = 1;
}
}
//前端代码
<div id="getDiv">
<ul>
<li><img src="image/1.jpg"></li>
<li><img src="image/2.jpg"></li>
<li><img src="image/3.jpg"></li>
<li><img src="image/4.jpg"></li>
</ul>
</div>
<input type="button" value="向左" id="left">
<input type="button" value="向右" id="right">
1.png

评论列表( 0 )

你可以在登录后,对此项目发表评论

4_float_left_people 4_float_left_close