您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
Javascript 实现图片无缝滚动
作者：佚名 责任编辑：admin 更新时间：2022-06-22
效果 ： 鼠标移入图片 停止滚动， 鼠标移出自动滚动
可以调整向左或右方向滚动
代码如下:
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#div1 {
overflow: hidden;
width: 712px;
height: 108px;
margin: 100px auto;
position: relative;
background: red;
}
#div1 ul {
position: absolute;
left: 0;
top: 0;
}
#div1 ul li {
float: left;
width: 178px;
height: 108px;
list-style: none;
}
</style>
代码如下:
<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>
以上是一个简单的布局，下面是主要的Javascript 代码
代码如下:
<script type="text/javascript">
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.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() {
- 上一个程序编程： 使用JavaScript获取地址栏参数的方法
- 下一个程序编程： Javascript添加监听与删除监听用法详解
