<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type=" ...
<!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='/images/loading.gif' data-original="img/014.jpg" /></li>
<li><img src='/images/loading.gif' data-original="img/017.jpg" /></li>
<li><img src='/images/loading.gif' data-original="img/018.jpg" /></li>
<li><img src='/images/loading.gif' data-original="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()
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：JS无缝滚动
关键词：JS
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
