无缝滚动效果(鼠标移入暂停)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.box {
overflow: auto;
width: 300px;
height: 360px;
margin: 20px auto;
box-shadow: 0 0 4px rgba(0, 0, 0, .5);
}
.box ul {
padding-left: 20px;
}
.box ul li {
line-height: 40px;
}
</style>
</head>
<body>
<div class="box">
<ul class="content">
<li>javascript从入门到泪奔1</li>
<li>javascript从入门到泪奔2</li>
<li>javascript从入门到泪奔3</li>
<li>javascript从入门到泪奔4</li>
<li>javascript从入门到泪奔5</li>
<li>javascript从入门到泪奔6</li>
<li>javascript从入门到泪奔7</li>
<li>javascript从入门到泪奔8</li>
<li>javascript从入门到泪奔9</li>
<li>javascript从入门到泪奔10</li>
</ul>
</div>
</body>
<script>
var oDiv = document.querySelector(".box");
var oUl = document.querySelector(".box ul");
oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
var timer = null;
// 用来获取元素实际内容大小
// console.log(oDiv.scrollWidth);
// console.log(oDiv.scrollHeight);
function autoPlay() {
timer = setInterval(() => {
oDiv.scrollTop++;
if (oDiv.scrollTop >= oDiv.scrollHeight / 2) {
oDiv.scrollTop = 0;
}
}, 20);
}
autoPlay();
//当鼠标移入div时,关闭计时器
oDiv.onmouseover = function () {
clearInterval(timer);
}
//当鼠标移开div时,开启计时器
oDiv.onmouseout = function () {
autoPlay();
}
</script>
</html>
无缝滚动效果(鼠标移入暂停、单图暂停一段时间然后继续效果)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.box {
overflow: hidden;
width: 300px;
height: 40px;
margin: 20px auto;
box-shadow: 0 0 4px rgba(0, 0, 0, .5);
}
.box ul {
padding-left: 20px;
}
.box ul li {
line-height: 40px;
}
</style>
</head>
<body>
<div class="box">
<ul class="content">
<li>javascript从入门到泪奔1</li>
<li>javascript从入门到泪奔2</li>
<li>javascript从入门到泪奔3</li>
<li>javascript从入门到泪奔4</li>
<li>javascript从入门到泪奔5</li>
<li>javascript从入门到泪奔6</li>
<li>javascript从入门到泪奔7</li>
<li>javascript从入门到泪奔8</li>
<li>javascript从入门到泪奔9</li>
<li>javascript从入门到泪奔10</li>
</ul>
</div>
</body>
<script>
var oDiv = document.querySelector(".box");
var oUl = document.querySelector(".box ul");
oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
var timer = null;
function autoPlay() {
timer = setInterval(() => {
oDiv.scrollTop++;
if (oDiv.scrollTop >= oDiv.scrollHeight / 2) {
oDiv.scrollTop = 0;
}
//滚一行停止一下
if (oDiv.scrollTop % 40 === 0) {
clearInterval(timer);
setTimeout(() => {
autoPlay();
}, 1000);
}
}, 20);
}
autoPlay();
//当鼠标移入div时,关闭计时器
// oDiv.onmouseover = function () {
// clearInterval(timer);
// }
//当鼠标移开div时,开启计时器
// oDiv.onmouseout = function () {
// autoPlay();
// }
</script>
</html>