js左右循环滚动图片广告代码

    这个代码我测试过了,效果是非常的好 可以点此去看示例:www.baliwx.com 

   注:如果是在同一页面使用两个向左滚动的广告代码,则需要把其中一个广告的代码的函数修改一下,即把tab修改为tab3、tab1修改为tab4等,要不到时会出现只有一个滚动的现象。

<!–
    #demo {
     background: #FFF;
     overflow:hidden;
     border: 1px dashed #CCC;
     height: 100px;
     text-align: center;
     float: left;
    }
    #demo img {
     border: 3px solid #F2F2F2;
     display: block;
    }
    –>向上滚动 </code></p>
<div id=”demo”><code> <div id=”demo1″><a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> </div>
<div id=”demo2″><a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> </div>
</div>
<script>
    <!–
    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>
图片下无缝滚动 程序代码
<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 border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> </div>
<div id=”demo2″></div>
</div>
<script>
    <!–
    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>
图片左无缝滚动 程序代码
<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 border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> </div>
<div id=”demo2″></div>
</div>
</div>
<script>
    <!–
    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>
图片右无缝滚动 程序代码
<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 border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> </div>
<div id=”demo2″></div>
</div>
</div>
<script>
    <!–
    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>
</code> <p></p>
<code> <div id=”demo”>
<div id=”demo1″><a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> </div>
<div id=”demo2″></div>
</div>
<script>
    <!–
    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>
图片下无缝滚动 程序代码
<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 border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> </div>
<div id=”demo2″></div>
</div>
<script>
    <!–
    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>
图片左无缝滚动 程序代码
<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 border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> </div>
<div id=”demo2″></div>
</div>
</div>
<script>
    <!–
    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>
图片右无缝滚动 程序代码
<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 border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> <a href=”#”><img border=”0″ src=”http://www.cnrui.cn/other/link/Clear_logo.gif” /></a> </div>
<div id=”demo2″></div>
</div>
</div>
<script>
    <!–
    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>
</code>

js左右循环滚动图片广告代码》上有 14 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您必须启用javascript在这里看到验证码!