照片往左移动 

<style type="text/css">
ul,li { margin:0; padding:0; }
#scrollBox { width:900px; height:200px; margin:0 auto; position:relative; overflow:hidden; }
#scrolls { position:absolute; list-style:none; width:1680px; }
#scrolls li { float:left; display:inline; width:200px; height:200px; margin:0 5px; }
</style>
<script type="text/javascript">
window.onload = function(){
    var scrolls = document.getElementById("scrolls");
    // 使scrolls里面的内容加倍，以便连续显示
    scrolls.innerHTML += scrolls.innerHTML;
    // 初始化scrolls的水平位置
    scrolls.style.left = 0 + "px";
    // 启动定时器
    setInterval("Scroll()", 20);
}

function Scroll()
{
    var scrolls = document.getElementById("scrolls");
    // 获取当前scrolls的水平位置left，并让其减少一个像素
    var left = parseInt(scrolls.style.left);
    left--;
    // 如果left当前的值与页面刚加载时ul里面内容的宽度相同，则left自动由当前值变成0，视觉上不会发生变化
    if(left == -840) left = 0;
    // 重新设置scrolls的水平坐标
    scrolls.style.left = left + "px";
}
</script>
</head>

<body>
<div id="scrollBox">
    <ul id="scrolls">
        <li><img src="images/Blue hills.jpg" /></li>
        <li><img src="images/Sunset.jpg" /></li>
        <li><img src="images/Water lilies.jpg" /></li>
        <li><img src="images/Winter.jpg" /></li>
    </ul>
</div>
</body>

 

posted @ 2013-11-16 13:45  914556495  阅读(239)  评论(0)    收藏  举报