你的位置:首页 > Java教程

[Java教程]JS无缝滚动


<!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="img/014.jpg" /></li>

<li><img src="img/017.jpg" /></li>

<li><img src="img/018.jpg" /></li>

<li><img src="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()

 

function move() {

if(-ul.offsetLeft > ul.offsetWidth / 2) {//左滚无缝

ul.style.left = 0 + "px";

}

 

if(ul.offsetLeft > 0) {//右滚无缝

ul.style.left = -ul.offsetWidth / 2 + "px";

}

 

ul.style.left = ul.offsetLeft + speed + "px";

}

 //实现通过按钮改变运动方向的功能

var inputs = document.getElementsByTagName("input");

inputs[0].onclick = function() {

speed = -4;

}

inputs[1].onclick = function() {

speed = 4;

}

</script>

 

</html>