码迷,mamicode.com
首页 > 其他好文 > 详细

图片无缝滚动

时间:2016-03-11 14:07:08      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:

代码:

 


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
* {
margin: 0;
padding: 0;
}

#div1 {
width: 712px;
height: 108px;
margin: 100px auto;
position: relative;
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 = -2;

//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 = -2;
};
document.getElementsByTagName(‘a‘)[1].onclick = function () {
speed = 2;
};
};
</script>
</head>

<body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>

<div id="div1">
<ul>
<li><img src="img2/1.jpg" alt="此处为第一张图片"/></li>
<li><img src="img2/2.jpg" alt="此处为第二张图片"/></li>
<li><img src="img2/3.jpg" alt="此处为第三张图片"/></li>
<li><img src="img2/4.jpg" alt="此处为第四张图片"/></li>
  </ul>
</div>
</body>
</html>

 

运行结果(其中图片在匀速向左滚动)

技术分享

 

图片无缝滚动

标签:

原文地址:http://www.cnblogs.com/theWayToAce/p/5265255.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!