图片向左\向右不间断滚动代码

来源:互联网   编辑:思良  发表时间:2015-05-15  关注度:1190  

图片向左

<DIV id=demo style="OVERFLOW: hidden; WIDTH: 790; COLOR: #ffffff" align="center">

      <TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0">

        <TBODY>

        <TR>

          <TD id=demo1 vAlign=top><table width="790" border="0" cellpadding="0" cellspacing="0">

            <tr>

               <td><img src="images/tu_10.gif"></td>

              <td><img src="images/tu_20.gif"></td>

              <td><img src="images/tu_30.gif"></td>

              <td><img src="images/tu_40.gif"></td>

            </tr> 

          </table>

    </TD>

          <TD id=demo2 vAlign=top>&nbsp;</TD>

    </TR>

    </TBODY>

    </TABLE>

    </DIV>

<script language=JavaScript>

var speed3=25//速度数值越大速度越慢

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else{

demo.scrollLeft++

}

}

var MyMar=setInterval(Marquee,speed3)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)}</script>

图片向右

<div id="demo" style="overflow:hidden;width:800px;color:#ffffff; margin-left:30px;">

      <table cellpadding="0" cellspacing="0" border="0">

        <tr><td id="demo1" valign="top" align="center">

          <table cellpadding="2" cellspacing="0" border="0">

            <tr align="center">

              <td><img src="images/tu1.jpg"></td>

              <td><img src="images/tu2.jpg"></td>

              <td><img src="images/tu3.jpg"></td>

              <td><img src="images/tu4.jpg"></td>

              

            </tr>

          </table>

        </td>

        <td id="demo2" valign="top"></td>

        </tr>

      </table>

    </div>

<script>

var speed=15//速度数值越大速度越慢

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo.scrollLeft<=0)

demo.scrollLeft+=demo2.offsetWidth

else{

demo.scrollLeft--

}

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>

今天在网上找的代码,整理了一下:

-----------------------上下滚动主要部分-------------------------

<!-- 图片宽度width:90 图片高度height:150 背景颜色background:#214984 这些根据你实际的需要修改-->

<div id=demo style=overflow:hidden;height:150;width:90;background:#214984;color:#ffffff>

<div id=demo1>

<!-- 加入要滚动的内容 -->

<!--#include file="GX/PHOTOIMG.htm"--></div>

<div id=demo2></div>

</div>

-----------------------向上滚动-------------------------------

<script>

var speed=30

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetTop-demo.scrollTop<=0)

demo.scrollTop-=demo1.offsetHeight

else{

demo.scrollTop++

}

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>

-----------------------向下滚动-------------------------------

<script>

var speed=30

demo2.innerHTML=demo1.innerHTML

demo.scrollTop=demo.scrollHeight

function Marquee(){

if(demo1.offsetTop-demo.scrollTop>=0)

demo.scrollTop+=demo2.offsetHeight

else{

demo.scrollTop--

}

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>

-----------------------左右滚动主要部分--------------------------

<!-- 图片宽度width:90 图片高度height:150 背景颜色background:#214984 这些根据你实际的需要修改-->

<div id=demo style=overflow:hidden;height:100;width:600;background:#214984;color:#ffffff>

<table align=left cellpadding=0 cellspace=0 border=0>

<tr>

<td id=demo1 valign=top<!--#include file="GX/PHOTOIMG.htm"-->

</td>

<td id=demo2 valign=top></td>

</tr>

</table>

</div>

-----------------------向左滚动-------------------------------

<script>

var speed=30

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else{

demo.scrollLeft++

}

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>

-----------------------向右滚动-------------------------------

<script>

var speed=30

demo2.innerHTML=demo1.innerHTML

demo.scrollLeft=demo.scrollWidth

function Marquee(){

if(demo.scrollLeft<=0)

demo.scrollLeft+=demo2.offsetWidth

else{

demo.scrollLeft--

}

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>

 

    支付宝扫码领红包,不用多说,用过的人都知道,双赢的,你得红包,我得到同等推广红包,比如你扫到1元,我也得1元,大家得到的红包可以去实体店消费!新用户至少10元以上哦,每天都有!希望大家每天来本站扫码!感谢感谢!

    把打赏改成扫码红包了!支持本站就扫码下!


下一篇:jQuery鼠标经过显示下拉菜单js横向导航代码


上一篇:图片特效大全(一)


小提示:按 回车[Enter]键 返回,按 ←键 返回上一页, 按 →键 进入下一页。

网友评论(0条评论)

选择头像
     

新闻评论(共有 0 条评论)

手机访问

本站APP

联系我

加我微信