验证中...
码云账号不再使用社区账号进行二次身份验证的通知 详情
私信发送成功
片段 1 片段 2
gistfile1.txt
原始数据 复制代码
window.onload=function(){
var oDiv=document.getElementById("div1");
var oUl=document.getElementsByTagName("ul")[0];
var oLi=document.getElementsByTagName("li");
//设置ul的方法
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
oUl.style.width=oLi[0].offsetWidth*oLi.length+"px";
//移动速度
var speed=2;
//控制滚动的方向
var a1=document.getElementById("id1");
var a2=document.getElementById("id2");
var a3=document.getElementById("id3");
a1.onclick=function(){
speed=2;
}
a2.onclick=function(){
speed=-2;
}
a3.onclick=function(){
speed=0;
}
//鼠标移开
function move(){
//判断如果ul向左移动到一半的时候 向ul中添加ul
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left="0";
}
//判断ul向右移动时候,设置ul添加图片
if(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2+"px";
}
oUl.style.left=oUl.offsetLeft-speed+"px";
}
//定时器 控制移动的时间
var timer=setInterval(move,30);
//鼠标移入
oDiv.onmouseover=function(){
clearInterval(timer);
}
//鼠标移开
oDiv.onmouseout=function(){
timer=setInterval(move,30);
}
}
<body>
<div id="a">
<a href="javascript:void(0)" id="id1">向左</a>
<a href="javascript:void(0)" id="id3">暂停</a>
<a href="javascript:void(0)" id="id2">向右</a>
</div>
<div id="div1">
<ul>
<li><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/6.jpg" /></li>
<li><img src="images/7.jpg" /></li>
</ul>
</div>
</body>
6.png

评论列表( 0 )

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

2_float_left_people 2_float_left_close