<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
#box {
width: 300px;
height: 200px;
border: 1px solid #cccccc;
margin: 200px auto;
padding: 5px;
}
#inner {
width: 300px;
height: 200px;
position: relative;
overflow: hidden;
}
#inner ul {
width: 600%;
position: absolute;
left: 0;
top: 0;
}
#inner li {
float: left;
}
</style>
</head>
<body>
<div id="box">
<div id="inner">
<ul>
<li><a href="#"><img src="imagess/01(1).jpg" alt=""/></a></li>
<li><a href="#"><img src="imagess/02.jpg" alt=""/></a></li>
<li><a href="#"><img src="imagess/03.jpg" alt=""/></a></li>
<li><a href="#"><img src="imagess/04.jpg" alt=""/></a></li>
<li><a href="#"><img src="imagess/01(1).jpg" alt=""/></a></li>
</ul>
</div>
</div>
<script src="../common.js"></script>
<script>
var boxobj=my$("box");
var innerobj=my$("inner");
//获取相框的宽度，也就是图片的宽度
var innerwidth=innerobj.offsetWidth;
var ulobj=innerobj.children[0];
//页面加载完毕，图片就开始自动移动
//设置当前位置
var current=0;
//封装定时器里的函数
function mov(){
current-=10;
var num=ulobj.children.length-1;
var lengths=num*innerwidth;
if(current<-lengths){
ulobj.style.left=0+"px";
current=0;
}else{
ulobj.style.left=current+"px";
}
}
var timeid=setInterval(mov,30);
//鼠标放上面，图片停止移动
boxobj.onmouseover=function(){
clearInterval(timeid);
};
//鼠标离开，图片继续移动
boxobj.onmouseout=function(){
timeid=setInterval(mov,30);
};
</script>
</body>
</html>
无缝连接轮播图
