DIV+CSS+JS图片无缝滚动代码

作者 :
免费
  • 正文
  • 先了解一下对象的几个的属性:

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

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

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

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

    scrollWidth:获取对象的滚动宽度

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

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

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

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

    DIV + JS 图片上无缝滚动

    <style type="text/css"><!--
    #demo {
    background: #FFF;
    overflow:hidden;
    border: 1px dashed #CCC;
    height: 100px;
    text-align: center;
    float: left;
    }
    #demo img {
    border: 3px solid #F2F2F2;
    display: block;
    }
    --></style>向上滚动
    <div id="demo">
    <div id="demo1"><a href="#"><img alt="" src="http://wmphp.com/logo.gif" border="0" /></a>
    <a href="#"><img alt="" src="http://wmphp.com/logo.gif" border="0" /></a>
    <a href="#"><img alt="" src="http://wmphp.com/logo.gif" border="0" /></a>
    <a href="#"><img alt="" src="http://wmphp.com/logo.gif" border="0" /></a>
    <a href="#"><img alt="" src="http://wmphp.com/logo.gif" border="0" /></a></div>
    <div id="demo2"></div>
    </div>
    <script type="text/javascript">// <![CDATA[
    var speed=10; //数字越大速度越慢
    var tab=document.getElementById("demo");
    var tab1=document.getElementById("demo1");
    var tab2=document.getElementById("demo2");
    tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
    function Marquee(){
    if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时
    tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端
    else{
    tab.scrollTop++
    }
    }
    var MyMar=setInterval(Marquee,speed);
    tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
    tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
    // ]]></script>

    DIV + CSS + JS图片下无缝滚动

    <style type="text/css"><!--
    #demo {
    background: #FFF;
    overflow:hidden;
    border: 1px dashed #CCC;
    height: 100px;
    text-align: center;
    float: left;
    }
    #demo img {
    border: 3px solid #F2F2F2;
    display: block;
    }
    --></style>向下滚动
    <div id="demo">
    <div id="demo1"><a href="#"><img alt="" src="http://wmphp.com/logo.gif" border="0" /></a>
    <a href="#"><img alt="" src="http://wmphp.com/logo.gif" border="0" /></a>
    <a href="#"><img alt="" src="http://wmphp.com/logo.gif" border="0" /></a>
    <a href="#"><img alt="" src="http://wmphp.com/logo.gif" border="0" /></a>
    <a href="#"><img alt="" src="http://wmphp.com/logo.gif" border="0" /></a></div>
    <div id="demo2"></div>
    </div>
    <script type="text/javascript">// <![CDATA[
    var speed=10; //数字越大速度越慢
    var tab=document.getElementById("demo");
    var tab1=document.getElementById("demo1");
    var tab2=document.getElementById("demo2");
    tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
    tab.scrollTop=tab.scrollHeight
    function Marquee(){
    if(tab1.offsetTop-tab.scrollTop>=0)//当滚动至demo1与demo2交界时
    tab.scrollTop+=tab2.offsetHeight //demo跳到最顶端
    else{
    tab.scrollTop--
    }
    }
    var MyMar=setInterval(Marquee,speed);
    tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
    tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
    // ]]></script>

    DIV + CSS + JS图片左无缝滚动

    <style type="text/css"><!--
    #demo {
    background: #FFF;
    overflow:hidden;
    border: 1px dashed #CCC;
    width: 500px;
    }
    #demo img {
    border: 3px solid #F2F2F2;
    }
    #indemo {
    float: left;
    width: 800%;
    }
    #demo1 {
    float: left;
    }
    #demo2 {
    float: left;
    }
    --></style>向左滚动
    <div id="demo">
    <div id="indemo">
    <div id="demo1"><a href="#"><img alt="" src="http://wmphp.com/logo.gif" border="0" /></a>
    <a href="#"><img alt="" src="http://wmphp.com/logo.gif" border="0" /></a>
    <a href="#"><img alt="" src="http://wmphp.com/logo.gif" border="0" /></a>
    <a href="#"><img alt="" src="http://wmphp.com/logo.gif" border="0" /></a>
    <a href="#"><img alt="" src="http://wmphp.com/logo.gif" border="0" /></a>
    <a href="#"><img alt="" src="http://wmphp.com/logo.gif" border="0" /></a></div>
    <div id="demo2"></div>
    </div>
    </div>
    <script type="text/javascript">// <![CDATA[
    var speed=10; //数字越大速度越慢
    var tab=document.getElementById("demo");
    var tab1=document.getElementById("demo1");
    var tab2=document.getElementById("demo2");
    tab2.innerHTML=tab1.innerHTML;
    function Marquee(){
    if(tab2.offsetWidth-tab.scrollLeft<=0)
    tab.scrollLeft-=tab1.offsetWidth
    else{
    tab.scrollLeft++;
    }
    }
    var MyMar=setInterval(Marquee,speed);
    tab.onmouseover=function() {clearInterval(MyMar)};
    tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
    // ]]></script>

    DIV + JS图片右无缝滚动

    <style type="text/css"><!--
    #demo {
    background: #FFF;
    overflow:hidden;
    border: 1px dashed #CCC;
    width: 500px;
    }
    #demo img {
    border: 3px solid #F2F2F2;
    }
    #indemo {
    float: left;
    width: 800%;
    }
    #demo1 {
    float: left;
    }
    #demo2 {
    float: left;
    }
    --></style>向右滚动
    <div id="demo">
    <div id="indemo">
    <div id="demo1"><a href="#"><img alt="" src="http://wmphp.com/logo.gif" border="0" /></a>
    <a href="#"><img alt="" src="http://wmphp.com/logo.gif" border="0" /></a>
    <a href="#"><img alt="" src="http://wmphp.com/logo.gif" border="0" /></a>
    <a href="#"><img alt="" src="http://wmphp.com/logo.gif" border="0" /></a>
    <a href="#"><img alt="" src="http://wmphp.com/logo.gif" border="0" /></a>
    <a href="#"><img alt="" src="http://wmphp.com/logo.gif" border="0" /></a></div>
    <div id="demo2"></div>
    </div>
    </div>
    <script type="text/javascript">// <![CDATA[
    var speed=10; //数字越大速度越慢
    var tab=document.getElementById("demo");
    var tab1=document.getElementById("demo1");
    var tab2=document.getElementById("demo2");
    tab2.innerHTML=tab1.innerHTML;
    function Marquee(){
    if(tab.scrollLeft<=0)
    tab.scrollLeft+=tab2.offsetWidth
    else{
    tab.scrollLeft--
    }
    }
    var MyMar=setInterval(Marquee,speed);
    tab.onmouseover=function() {clearInterval(MyMar)};
    tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
    // ]]></script>

    已测试管用。

    END
    如本资源侵犯了您的权益,请联系投诉邮箱admin@wmphp.com进行举报!我们将在收到邮件的1个小时内处理完毕。 本站仅为平台,发布的资源均为用户投稿或转载!所有资源仅供参考学习使用,请在下载后的24小时内删除,禁止商用! Wmphp.com(完美源码)助力正版,如您有自己的原创产品,可以联系客服投稿,代理出售! Wmphp.com(完美源码)客服QQ:136882447 Wmphp.com(完美源码)商务电话(仅对企业客户/个人用户):15120086569 (微信同步) 请注意:本站不提供任何免费的技术咨询服务,为了节约时间,下载前 请确认自己会技术
    完美源码 » DIV+CSS+JS图片无缝滚动代码
    3467+

    本站勉强运行

    3649+

    用户总数

    689+

    资源总数

    0+

    今日更新

    2024-3-11

    最后更新时间