Blog

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>

14 comments

  1. 追梦人

    @90后奋斗博客:呵呵额,也祝你新年赚钱多多

    沙发
  2. 90后奋斗博客

    新年快乐,祝博主,流量多多!

    板凳
  3. 追梦人

    @朋朋:是不习惯wp的操作,转换倒是成功了的

    地板
  4. 追梦人

    @朋朋:可以去这里看示例 http://www.baliwx.com

    4楼
  5. 朋朋

    @追梦人:没弄明白?

    5楼
  6. 追梦人

    @朋朋:话说我以前也试过转为wp的,后来还是放弃了

    6楼
  7. 朋朋

    博客转换后的第一次回访哦!

    7楼
  8. 追梦人

    @凹凸曼:恩这确实是最大的难题

    8楼
  9. 追梦人

    @电脑控:呵呵,非常欢迎

    9楼
  10. 百创设计

    好资源顶啊

    10楼
  11. 该昵称已屏蔽

    以前碰到过,主要是这个无缝滚动难弄。

    11楼
  12. 电脑控

    学习一下!!!

    12楼
  13. 追梦人

    @太阳城娱乐网:呵呵,我昨天也是找了很久

    13楼
  14. 该昵称已屏蔽

    这个代码我找了很久了,谢谢博主。。

    14楼

Leave a Reply