<!DOCTYPE html>
<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">
*
{
margin: 0;
padding: 0;
} #div1
{
width: 600px;
height: 419px;
position: relative;
background-color: red;
margin: 100px auto;
overflow: hidden;
} #div1 ul
{
position: absolute;
left: 0;
top: 0;
margin: auto;
} #div1 ul li
{
float: left;
width: 630px;
height: 420px;
list-style: none;
}
</style>
<script type="text/javascript">
window.onload = function () {
var oDiv1 = document.getElementById("div1");
var oUl = oDiv1.getElementsByTagName("ul")[0];
var aLi = oUl.getElementsByTagName("li");
var speed = 2;//速度方向 oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
oUl.style.width = aLi[0].offsetWidth * aLi.length + 100 + "px"; function move() {
//左走
if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
oUl.style.left = '0';
}
//右走
if (oUl.offsetLeft > 0) {
oUl.style.left = -oUl.offsetWidth / 2 + "px";
}
oUl.style.left = oUl.offsetLeft + speed + "px"; }
var timeer = setInterval(move, 30); oDiv1.onmouseover = function () {
//清除定时器
clearInterval(timeer);
}
oDiv1.onmouseout = function () {
//打开定时器
timeer = setInterval(move, 30);
} //控制左右的按钮
var aA = document.getElementsByTagName("a");
aA[0].onclick = function () {
//左侧滚动
speed =-2;
} aA[1].onclick = function () {
//右侧滚动
speed =2;
}
}
</script>
</head>
<body>
<center>
<a href="javascript:void(0);">向左走</a>
<a href="javascript:void(0);">向右走</a>
</center>
<div id="div1">
<ul>
<li>
<img src="data:images/00_00.jpg" /></li>
<li>
<img src="data:images/00_01.jpg" /></li>
<!--li>
<img src="data:images/00_02.jpg" /></!--li>
<li>
<img src="data:images/00_03.jpg" /></li-->
</ul>
</div> </body>
</html>
说明：我的图片尺寸大小是630X419：