JS无缝滚动图片

最新推荐文章于 2022-04-18 00:23:50 发布

ao_xun

最新推荐文章于 2022-04-18 00:23:50 发布

阅读量317

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/ao_xun/article/details/8553047

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

ps:看的别人的源代码，个人认为难理解的地方或者是知识点都加了注解。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style type="text/css">
*{margin:0; padding:0;}
</style>

<title>图片移动</title>
</head>

<body>
<div id="colee" style="width:410px; height:253px; overflow:hidden;">
<div id="colee1">
<p><img src="images/p3.jpg" /></p>
<p><img src="images/p3.jpg" /></p>
<p><img src="images/p3.jpg" /></p>
<p><img src="images/p3.jpg" /></p>
<p><img src="images/p3.jpg" /></p>
<p><img src="images/p3.jpg" /></p>
<p><img src="images/p3.jpg" /></p>
<p><img src="images/p3.jpg" /></p>
<p><img src="images/p3.jpg" /></p>
</div>
<div id="colee2"></div>
</div>

<script type="text/javascript">
//速度
var speed = 30;

//获取元素
var colee = document.getElementById("colee");
var colee1 = document.getElementById("colee1");
var colee2 = document.getElementById("colee2");

//把colee1里面的元素克隆到colee2里面去
colee2.innerHTML = colee1.innerHTML;

function Marquee1() {
/*
*offsetTop: 指这个元素对象距离它的上层对象的距离
*offsetHeight: 指的是自身的高度
*每个div都有滚动条,可以通过overflow:scroll显示。这里的移动就是设置滚动条来移动的
*/
//当colee2移动到colee顶部时返回最顶端
if(colee2.offsetTop - colee.scrollTop <= 0) {
//window.alert(colee2.offsetTop + "\n" + colee.scrollTop);
colee.scrollTop -= colee1.offsetHeight;
}else {
colee.scrollTop++;
}
}

//设置定时器
var MyMar1 = setInterval(Marquee1,speed);

//清除定时器 onmouseover: 事件会在鼠标指针移动到指定的对象上时发生
colee.onmouseover = function() {
clearInterval(MyMar1);
}

//重新开始启用定时器 onmouseout: 事件会在鼠标指针移出指定的对象时发生
colee.onmouseout = function() {
MyMar1 = setInterval(Marquee1,speed);
}
</script>


<div id="colee_right" style="overflow:hidden;width:500px;">
<table cellpadding="0" cellspacing="0" border="0" style="border:1px solid #0F0;">
<tr>
<td id="colee_right1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><p><img src="images/p3.jpg"></p></td>
<td><p><img src="images/p3.jpg"></p></td>
<td><p><img src="images/p3.jpg"></p></td>
<td><p><img src="images/p3.jpg"></p></td>
<td><p><img src="images/p3.jpg"></p></td>
</tr>
</table>
</td>
<td id="colee_right2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=30//速度数值越大速度越慢
var colee_right2=document.getElementById("colee_right2");
var colee_right1=document.getElementById("colee_right1");
var colee_right=document.getElementById("colee_right");

colee_right2.innerHTML=colee_right1.innerHTML

function Marquee4(){
if(colee_right.scrollLeft<=0)
colee_right.scrollLeft+=colee_right2.offsetWidth
else{
colee_right.scrollLeft--
}
}

var MyMar4=setInterval(Marquee4,speed)

colee_right.οnmοuseοver=function() {clearInterval(MyMar4)}
colee_right.οnmοuseοut=function() {MyMar4=setInterval(Marquee4,speed)}
</script>

</body>
</html>