js和jquery最简单的无缝滚动加控制器

最新推荐文章于 2024-11-08 16:09:18 发布

diexi9030

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量119

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xsyfalcon/p/10097232.html

版权

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>
* { margin: 0; padding: 0;}
body{ background-color:#1B1B1B}
#div1{ width: 800px; height: 150px; position: relative; margin: 100px auto;overflow: hidden;}
#div1 ul { width: 800px; height: 150px; position: relative; }
#div1 ul li { height: 150px; float: left; list-style: none; padding-right:20px;}
#div1 ul li img { width: 200px; height: 150px; display: inline-block;}
a{ color: #B4B4B4; }

</style>
<body>
<a href="#" style=" display: block; margin:0 auto; width: 50px;">向左走</a>
<a href="#" style=" display: block; margin:0 auto; width: 50px;">向右走</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>
<script>
window.οnlοad=function(){
var odiv = document.getElementById('div1');
var oul = odiv.getElementsByTagName('ul')[0];
var ali = oul.getElementsByTagName('li');
var spa = -2;
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+spa+'px';
}
var timer = setInterval(move,30)

odiv.οnmοusemοve=function(){clearInterval(timer);}
odiv.οnmοuseοut=function(){timer = setInterval(move,30)};
document.getElementsByTagName('a')[0].onclick = function(){
spa=-2;
}
document.getElementsByTagName('a')[1].onclick = function(){
spa=2;
}
}