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

最新推荐文章于 2024-09-05 10:13:13 发布

树上的大腰子

最新推荐文章于 2024-09-05 10:13:13 发布

阅读量573

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq1791422018/article/details/26145465

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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