效果原理:让ul一直向左滚动
复制li,改变ul的宽度,
进行判断,是否越界
如果越界,重新定位。
控制向左向右,设定一个speed,更改其值的正负。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无缝轮播</title>
<style>
*{margin: 0;padding: 0;}
#div1{width: 800px;height: 150px;margin: 100px auto;position: relative;background: blue;overflow: hidden;}
#div1 ul{position: absolute;top: 0;left: 0;}
#div1 ul li{list-style-type: none;float: left;width: 200px;height: 150px;;}
img{width: 200px;height: 150px;}
</style>
<script>
window.onload=function(){
//控制向左向右,主要是通过是加还是减speed
var speed=-2;
function move(){
if(oUl.offsetLeft<-oUl.offsetWidth/2){
//当其往左移动了四个li的宽度时,把整个图片拉回来
oUl.style.left=0;
}
if(oUl.offsetLeft>0){
//记得末尾加px
oUl.style.left=-oUl.offsetWidth/2+'px';
}
oUl.style.left=oUl.offsetLeft+speed+'px';
};
var time=null;
var oDiv = document.getElementById('div1');
var oUl = oDiv.getElementsByTagName('ul')[0];
var oLi = oDiv.getElementsByTagName('li');
//使其形成8个li
oUl.innerHTML = oUl.innerHTML+oUl.innerHTML;
oUl.style.width = oLi[0].offsetWidth*oLi.length+'px';
time = setInterval(move,30);
oDiv.onmouseover= function(){
clearInterval(time);
}
oDiv.onmouseout= function(){
time = setInterval(move,30);
}
var oBtn = document.getElementsByTagName('button');
oBtn[0].onclick = function(){
speed = -2;
}
oBtn[1].onclick = function(){
speed = 2;
}
}
</script>
</head>
<body>
<button value="向左走">向左走</button>
<button value="向右走">向右走</button>
<div id="div1">
<ul>
<li><img src="img/1.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
<li><img src="img/2.jpg"></li>
</ul>
</div>
</body>
</html>