<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
li{ list-style:none;}
#div1{ width:350px; height:60px; border:1px #000000 solid; position:relative; margin:0 auto; }
#div1 ul{ position:absolute; left:0;}
#div1 ul li{ width:80px; height:60px; margin-right:10px; float:left;}
</style>
<script type="text/javascript" src="无缝.js"></script>
<script type="text/javascript">
window.onload = function ()
{
var oinput = document.getElementById(‘input1‘)
var oul = document.getElementById(‘ul1‘);
var oli = oul.getElementsByTagName(‘li‘)
var inum = 4;
var onesize = oli[0].offsetWidth + 10;
var btn = true;
function getWidth()
{
oul.style.width = onesize * oli.length + ‘px‘;
}
getWidth();
oinput.onclick = function ()
{
if(btn)
{
btn = false;
for( var i = 0; i < inum; i++ )
{
var ali = oli[i].cloneNode(true);
oul.appendChild(ali);
getWidth();
}
startMove(oul,{left: -inum*onesize},function ()
{
for(var i = 0; i < inum; i++ )
{
oul.removeChild(oli[0]);
oul.style.left = 0;
}
})
btn = true;
}
}
}
</script>
</head>
<body>
<input type="button" value="切换" id="input1" />
<div id="div1">
<ul id="ul1">
<li><img src="img/1- (1).jpg" /></li>
<li><img src="img/1- (2).jpg" /></li>
<li><img src="img/1- (3).jpg" /></li>
<li><img src="img/1- (4).jpg" /></li>
<li><img src="img/1- (5).jpg" /></li>
</ul>
</div>
</body>
</html>
原文：http://www.cnblogs.com/mayufo/p/4271216.html