您的位置：首页 > Web前端 > JavaScript

蜗牛—JavaScript学习之图片自动切换

2014-05-18 14:09 465 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<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>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航