<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul, li { margin: 0; padding: 0; list-style-type: none; } ...
<!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>
