常⽤JS图⽚滚动（⽆缝、平滑、上下左右滚动）代码⼤全
innerHTML:    设置或获取位于对象起始和结束标签内的 HTML
scrollHeight: 获取对象的滚动⾼度。
scrollLeft:  设置或获取位于对象左边界和窗⼝中⽬前可见内容的最左端之间的距离
scrollTop:    设置或获取位于对象最顶端和窗⼝中可见内容的最顶端之间的距离
scrollWidth: 获取对象的滚动宽度
offsetHeight: 获取对象相对于版⾯或由⽗坐标 offsetParent 属性指定的⽗坐标的⾼度
offsetLeft:  获取对象相对于版⾯或由 offsetParent 属性指定的⽗坐标的计算左侧位置
offsetTop:    获取对象相对于版⾯或由 offsetTop 属性指定的⽗坐标的计算顶端位置
offsetWidth: 获取对象相对于版⾯或由⽗坐标 offsetParent 属性指定的⽗坐标的宽度
以下包含四种⽅向的滚动代码，粗体部分需要⾃⾏修改，可修改成更复杂的代码，如图⽂混排、加边框、限制图⽚⼤⼩等。
增⼤width时，应该相应增加⼀些图⽚（应该是使所有图⽚组成的总宽度⼤于设定的width），即使是重复的，否则会在滚动⼀会⼉后停下来，图⽚不宜太⼤，否则在IE下滚动缓慢!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=gb2312"/>
<title>向上下左右不间断⽆缝滚动图⽚的效果(兼容⽕狐和IE)</title>
</head>
<body>
<div id="colee" >
<div id="colee1">
<p>
<img src="images/000.jpg"/>
</p>
<p>
<img src="images/111.jpg"/>
</p>
<p>
<img src="images/222.jpg"/>
</p>
<p>
<img src="images/333.jpg"/>
</p>
<p>
<img src="images/GK.png"/>
</p>
<p>
<img src="images/GK.png"/>
</p>
</div>
<div id="colee2"></div>
</div>
<script>
var speed =30;
var colee2 = ElementById("colee2");
var colee1 = ElementById("colee1");
var colee = ElementById("colee");
colee2.innerHTML = colee1.innerHTML;//克隆colee1为colee2
function Marquee1(){
//当滚动⾄colee1与colee2交界时
if(colee2.offsetTop - colee.scrollTop <=0){
colee.scrollTop -= colee1.offsetHeight;//colee跳到最顶端}else{
colee.scrollTop++;
}
}
var MyMar1 =setInterval(Marquee1, speed);//设置定时器
//⿏标移上时清除定时器达到滚动停⽌的⽬的
//⿏标移开时重设定时器
<!--向上滚动代码结束-->
<br>
<!--下⾯是向下滚动代码-->
<div id="colee_bottom" > <div id="colee_bottom1">
<p>
<img src="images/000.jpg"/>
</p>
<p>
<img src="images/111.jpg"/>
</p>
<p>
<img src="images/222.jpg"/>
</p>
</p>
<p>
<img src="images/333.jpg"/>
</p>
<p>
<img src="images/GK.png"/>
</p>
<p>
<img src="images/GK.png"/>
</p>
</div>
<div id="colee_bottom2"></div>
</div>
<script>
var speed =30;
var colee_bottom2 = ElementById("colee_bottom2");
var colee_bottom1 = ElementById("colee_bottom1");
var colee_bottom = ElementById("colee_bottom");
colee_bottom2.innerHTML = colee_bottom1.innerHTML;
colee_bottom.scrollTop = colee_bottom.scrollHeight;
function Marquee2(){
if(colee_bottom1.offsetTop - colee_bottom.scrollTop >=0)
colee_bottom.scrollTop += colee_bottom2.offsetHeight;
else{
colee_bottom.scrollTop--;
}
}
var MyMar2 =setInterval(Marquee2, speed);
useover=function(){clearInterval(MyMar2)};
useout=function(){ MyMar2 =setInterval(Marquee2, speed)}; </script>
<!--向下滚动代码结束-->
<br>
<!--下⾯是向左滚动代码-->
<div id="colee_left" >
<table cellpadding="0"cellspacing="0"border="0">
<tr>
<td id="colee_left1"valign="top"align="center">
<table cellpadding="2"cellspacing="0"border="0">
<tr align="center">
<td>
<td>
<p>
<img src="images/000.jpg"/>
</p>
</td>
<td>
<p>
<img src="images/111.jpg"/>
</p>
</td>
<td>
html滚动效果代码<p>
<img src="images/222.jpg"/>
</p>
</td>
<td>
<p>
<img src="images/333.jpg"/>
</p>
</td>
<td>
<p>
<img src="images/GK.png"/>
</p>
</td>
<td>
<p>
<img src="images/GK.png"/>
</p>
</td>
</tr>
</table>
</td>
<td id="colee_left2"valign="top"></td>
</tr>
</table>
</div>
<script>
//使⽤div时，请保证colee_left2与colee_left1是在同⼀⾏上. var speed =30;//速度数值越⼤速度越慢
var speed =30;//速度数值越⼤速度越慢
var colee_left2 = ElementById("colee_left2");
var colee_left1 = ElementById("colee_left1");
var colee_left = ElementById("colee_left");
colee_left2.innerHTML = colee_left1.innerHTML;
function Marquee3(){
if(colee_left2.offsetWidth - colee_left.scrollLeft <=0)//offsetWidth 是对象的可见宽度
colee_left.scrollLeft -= colee_left1.offsetWidth;//scrollWidth 是对象的实际内容的宽，不包边线宽度else{
colee_left.scrollLeft++;
}
}
var MyMar3 =setInterval(Marquee3, speed);
useover=function(){clearInterval(MyMar3)};
useout=function(){ MyMar3 =setInterval(Marquee3, speed)};
</script>
<!--向左滚动代码结束-->
<br>
<!--下⾯是向右滚动代码-->
<div id="colee_right" >
<table cellpadding="0"cellspacing="0"border="0">
<tr>
<td id="colee_right1"valign="top"align="center">
<table cellpadding="2"cellspacing="0"border="0">
<tr align="center">
<td>
<p>
<img src="images/000.jpg"/>
</p>
</td>
<td>
<p>
<img src="images/111.jpg"/>
</p>
</td>
<td>
<p>
<img src="images/222.jpg"/>
</p>
</td>
<td>
<p>
<img src="images/333.jpg"/>
</p>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。