JS无缝滚动

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; min-height: 36.0px }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #d74200 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #289c97 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #060606 }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #4a8a01 }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #929151; min-height: 36.0px }
p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #929151 }
p.p10 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #ad42ef }
p.p11 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #4f5d66 }
p.p12 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #a5b2b9 }
p.p13 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #e48b00 }
p.p14 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #4663cc }
span.s1 { color: #4f5d66 }
span.s2 { color: #2b7ec3 }
span.s3 { color: #48565d }
span.s4 { color: #289c97 }
span.s5 { color: #d74200 }
span.s6 { color: #929151 }
span.s7 { color: #060606 }
span.s8 { color: #ad42ef }
span.s9 { color: #d16400 }
span.s10 { color: #698906 }
span.s11 { color: #4a8a01 }
span.s12 { color: #000000 }
span.s13 { color: #4663cc }
span.s14 { color: #a5b2b9 }
span.s15 { color: #e48b00 }
span.Apple-tab-span { white-space: pre }

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