无缝滚动
今天我们来学习如何实现无缝滚动的效果。我们先来看一下效果图。
![7861972-8a599e45b45347da.gif](https://i-blog.csdnimg.cn/blog_migrate/3138c2e39a606d2f3a2264370f97059a.gif)
无缝滚动
接下来我们来分析一下代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style>
* {
padding: 0;
margin: 0;
}
#div1 {
width: 712px;
height: 108px;
margin: 100px auto;
position: relative;
background: red;
overflow: hidden;
}
#div1 ul {
position: absolute;
left: 0;
top: 0;
}
#div1 ul li {
float: left;
width: 178px;
height: 108px;
list-style: none;
}
</style>
<script>
window.onload = function() {
var oDiv = document.getElementById('div1');
var oUl = oDiv.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var speed = -4;
// oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
oUl.innerHTML += oUl.innerHTML;
oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
function move() {
if(oUl.offsetLeft < -oUl.offsetWidth / 2) {
oUl.style.left = '0';
}
if(oUl.offsetLeft > 0) {
oUl.style.left = -oUl.offsetWidth / 2 + 'px';
}
oUl.style.left = oUl.offsetLeft + speed + 'px';
}
var timer = setInterval(move, 30);
oDiv.onmouseover = function() {
clearInterval(timer);
}//鼠标放上去停住
oDiv.onmouseout = function() {
timer = setInterval(move, 30);
}//鼠标移开,继续移动
document.getElementsByTagName('a')[0].onclick = function() {
speed = -4;
}//向左走
document.getElementsByTagName('a')[1].onclick = function() {
speed = 4;
}//向右走
}
</script>
</head>
<body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>
<div id="div1">
<ul>
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
</ul>
</div>
</body>
</html>
乍一看代码还挺长,其实你看懂的话,就会觉得代码其实并不复杂。
总结起来就三点:
一、效果原理
1.让ul一直向左移动
二、复制li
1.innerHTML和+=
2.修改ul的width
三、滚动过界后,重新设置
1.判断过界
function move() {
if(oUl.offsetLeft < -oUl.offsetWidth / 2) {
oUl.style.left = '0';
}
if(oUl.offsetLeft > 0) {
oUl.style.left = -oUl.offsetWidth / 2 + 'px';
}
oUl.style.left = oUl.offsetLeft + speed + 'px';
}
var timer = setInterval(move, 30);
好了,今天的学习就到这里了,想要源码的朋友关注我,回复"无缝滚动"即可。
愿你三冬暖,愿你春不寒,愿你天黑有灯,下雨有伞。
![7861972-018f395a801d36d0.jpg](https://i-blog.csdnimg.cn/blog_migrate/bfda09dd16e19162ee99f31179f0f834.jpeg)
小晴天.jpg