10 图片无缝滚动

功能:几张图片会向左或向右滚动,鼠标移进移出会停止和继续,点击按钮会切换左右滚动方向

事件:onmouseover,onmouseout,onclick

属性:ul的left,width

用到了计时器,innerHTML,offsetLeft,offsetWidth

oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';

oUl.style.left=oUl.offsetLeft+speed+'px';

////////////

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">

<link href="css1.css" rel="stylesheet" type="text/css"
charset="UTF-8">
</head>
<body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>
<div id="div1">
<ul>
<li><img src="img/0.png"/></li>
<li><img src="img/1.png"/></li>
<li><img src="img/2.png"/></li>
<li><img src="img/3.png"/></li>
<li><img src="img/4.png"/></li>
</ul>
</div>
<script src="js1.js"> </script>
</body>
</html>

//////////////css

*{

margin:0;
padding:0;
}

#div1{
width:1000px;
height:100px;
background:yellow;
position:relative;
margin:100px auto;
overflow: hidden;
}
#div1 ul{
top:0;
left:0;
position:absolute;

}
#div1 ul li{
width:200px;
height:100px;

list-style:none;
float:left;
}


#div1 ul li img{
width:200px;
height:100px;

}

////////////////js

window.onload=function(){

var oDiv=document.getElementById("div1");
var oUl=oDiv.getElementsByTagName("ul")[0];
var aLi=oUl.getElementsByTagName("li");
var aBtn1=document.getElementsByTagName("a")[0];
var aBtn2=document.getElementsByTagName("a")[1];
var speed=2;

oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
var timer=null;
function gogo(){
//Left小写了
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left='0';
}
if(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2+'px';
}
oUl.style.left=oUl.offsetLeft+speed+'px';
};
timer=setInterval(gogo,50);
oUl.onmouseover=function(){
clearInterval(timer);
};
oUl.onmouseout=function(){
timer=setInterval(gogo,50);
};
aBtn1.onclick=function(){
speed=-2;
};
aBtn2.onclick=function(){
speed=2;
};
};

posted @ 2018-03-07 00:20  萹豆  阅读(117)  评论(0编辑  收藏  举报