<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul,
li {
margin: 0;
padding: 0;
list-style-type: none;
}
img {
height: 300px;
width: 300px;
}
ul {
position: absolute;
left: 0;
top: 0;
}
li {
float: left;
}
#div1 {
height: 300px;
width: 1200px;
background-color: red;
margin: 100px auto;
position: relative;
overflow: hidden;
}
input{
border: 1px solid #8a2be2;
height: 100px;
width: 200px;
font-size: 20px;
color: white;
background-color: #ffb6c1;
margin-left: 100px;
}
</style>
</head>
<body>
<div id="div1">
<ul>
<li><img src="img/014.jpg" /></li>
<li><img src="img/017.jpg" /></li>
<li><img src="img/018.jpg" /></li>
<li><img src="img/019.jpg" /></li>
</ul>
</div>
<input type="button" value="向左滚动" />
<input type="button" value="向右滚动" />
</body>
<script type="text/javascript">
// 实现无缝滚动，鼠标移入停止滚动，移出继续滚动，以及可以调节滚动方向效果
var odiv = document.getelementbyid("div1");
var ul = document.getelementsbytagname("ul")[0];
var lis = document.getelementsbytagname("li");
var timer = null;
var speed = 4;
ul.innerhtml = ul.innerhtml + ul.innerhtml;
ul.style.width = lis[0].offsetwidth * lis.length + "px";
timer = setinterval(move, 30);
odiv.onmouseover = function() {//实现鼠标移入暂停
clearinterval(timer);
}
odiv.onmouseout = function() {//鼠标移出继续滚动
timer = setinterval(move, 30);
}
move();//每次执行move()的时候都会延迟30ms，//
/在第一次的实际效果上有瑕疵，在外面调用一次move()
function move() {
if(-ul.offsetleft > ul.offsetwidth / 2) {//左滚无缝
ul.style.left = 0 + "px";
}
if(ul.offsetleft > 0) {//右滚无缝
ul.style.left = -ul.offsetwidth / 2 + "px";
}
ul.style.left = ul.offsetleft + speed + "px";
}
//实现通过按钮改变运动方向的功能
var inputs = document.getelementsbytagname("input");
inputs[0].onclick = function() {
speed = -4;
}
inputs[1].onclick = function() {
speed = 4;
}
</script>
</html>