<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.js"></script>
<style>
div,ul,li,img{
margin:0;
padding:0;
}
#div1{
width:1000px;
height:200px;
margin:0 auto;
position: relative;
overflow: hidden;
}
#div1 ul{
position: absolute;
list-style: none;
left:0;
}
#div1 ul li{
margin:5px;
height:200px;
width:200px;
background: #f00;
float:left;
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById("div1");
var oUl=oDiv.getElementsByTagName('ul')[0];//ul是数组，获取第一个ul
var oLi=oUl.getElementsByTagName("li");
var sid;
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=oLi[0].offsetWidth*oLi.length+"px";//oUl的宽度等于li的宽度*li的长度。
sid=setInterval(function(){//定时器
oUl.style.left=oUl.offsetLeft-3+"px";
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left="0px";
}
},30);
oUl.onmouseover=function(){//鼠标移入关闭定时器
clearInterval(sid);
};
oUl.onmouseout=function(){//鼠标移出开启定时器
sid=setInterval(function(){
oUl.style.left=oUl.offsetLeft-3+"px";
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left="0px";
}
},30);
}
}
</script>
</head>
<body>
<div id="div1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>
浙公网安备 33010602011771号