div+css+js无缝滚动代码

最新推荐文章于 2025-08-18 20:44:42 发布

转载最新推荐文章于 2025-08-18 20:44:42 发布 · 816 阅读

文章标签：

#css #div #function #border #前端开发 #float

本文介绍如何使用DIV和JavaScript实现图片的无缝滚动效果。通过设置定时器不断更新scrollTop属性来实现向上滚动，并通过判断条件确保图片连续显示。此外，还实现了鼠标悬停时停止滚动的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先了解一下对象的几个的属性：

innerHTML:设置或获取位于对象起始和结束标签内的 HTML

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

DIV + JS 图片上无缝滚动

 
        01<style type="text/<A title=css href="http://blog.suiyiidan.cn" target=_blank>css</A>"> 
 
        02<!-- 
 
        03#demo { 
 
        04background: #FFF; 
 
        05overflow:hidden; 
 
        06border: 1px dashed #CCC; 
 
        07height: 100px; 
 
        08text-align: center; 
 
        09float: left; 
 
        10} 
 
        11#demo img { 
 
        12border: 3px solid #F2F2F2; 
 
        13display: block; 
 
        14} 
 
        15--> 
 
        16</style> 
 
        17向上<STRONG style="BACKGROUND-COLOR: #ff66ff; COLOR: black">滚动</STRONG> 
 
        18  
 
        19  
 
        20<<STRONG style="BACKGROUND-COLOR: #99ff99; COLOR: black">div</STRONG> 
 
        21  
 
        22 id="demo"> 
 
        23<<STRONG style="BACKGROUND-COLOR: #99ff99; COLOR: black">div</STRONG> 
 
        24  
 
        25 id="demo1"> 
 
        26<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0"  /></a> 
 
        27<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0"  /></a> 
 
        28<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0"  /></a> 
 
        29<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0"  /></a> 
 
        30<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0"  /></a> 
 
        31</<STRONG style="BACKGROUND-COLOR: #99ff99; COLOR: black">div</STRONG> 
 
        32  
 
        33> 
 
        34<<STRONG style="BACKGROUND-COLOR: #99ff99; COLOR: black">div</STRONG> 
 
        35  
 
        36 id="demo2"></<STRONG style="BACKGROUND-COLOR: #99ff99; COLOR: black">div</STRONG> 
 
        37  
 
        38> 
 
        39</<STRONG style="BACKGROUND-COLOR: #99ff99; COLOR: black">div</STRONG> 
 
        40  
 
        41> 
 
        42<script> 
 
        43<!-- 
 
        44var speed=10; //数字越大速度越慢 
 
        45var tab=document.getElementById("demo"); 
 
        46var tab1=document.getElementById("demo1"); 
 
        47var tab2=document.getElementById("demo2"); 
 
        48tab2.innerHTML=tab1.innerHTML;  //克隆demo1为demo2 
 
        49function Marquee(){ 
 
        50if(tab2.offsetTop-tab.scrollTop<=0)//当<STRONG style="BACKGROUND-COLOR: #ff66ff; COLOR: black">滚动</STRONG> 
 
        51  
 
        52至demo1与demo2交界时 
 
        53tab.scrollTop-=tab1.offsetHeight  //demo跳到最顶端 
 
        54else{ 
 
        55tab.scrollTop++ 
 
        56} 
 
        57} 
 
        58var MyMar=setInterval(Marquee,speed); 
 
        59tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到<STRONG style="BACKGROUND-COLOR: #ff66ff; COLOR: black">滚动</STRONG> 
 
        60  
 
        61停止的目的 
 
        62tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器 
 
        63--> 
 
        64</script>