js_sl 无缝切换

浏览数：45 / 时间：2015年06月09日

<!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>