大连网站制作客服
主营业务
  • 网站制作
  • 网站维护
  • 网站推广
  • 域名空间
联系电话
联系人：尹先生
QQ:1050706570
E-mail:biz@noonenet.cn
地址：大连市甘井子区哲林北园29号
·首页 >> 网站技术 >> 可控制滚动方向的连续滚动图片,默认向左滚动

可控制滚动方向的连续滚动图片,默认向左滚动

  更新时间:2010-7-12 22:00:39    编辑:阿帆

实现功能：默认向左自动滚动图片,用鼠标可以控制向左向右滚动,具体实现方法看如下代码：

以下是代码片段：
      <a onMouseOver="r_left();">[向左]</a>
      <div id="demo" style="float:left;overflow:hidden;width:810px;height:140px;margin-left:10px;">
   <TABLE cellPadding="0" width="100%" align="left" border="0" cellSpacing="0">
              <TR>
    <!--------------------demo1--------------------->
               <TD id="demo1" vAlign="top">
                  <TABLE cellSpacing="0" cellPadding="0">
                    <TR vAlign="top">
                      <TD vAlign="top" noWrap>
                        <TABLE cellSpacing="0" cellPadding="0" align="center" border="0">
                          <TR>
                            <TD align="middle">
                              <TABLE cellSpacing="0" cellPadding="0" width="140" align="center" border="0">
                                <TR><TD align="middle" height="120"><A href="product.html#p1" target="_parent"><img src="http://www.noonenet.cn/images/logo.gif" width="112" height="45" border="0"/></A></TD></TR>
                                <TR><TD align="middle" height="20"><A href="product.html#p1" target="_parent">图片一</A></TD></TR>
         </TABLE>
       </TD>
                            <TD align="middle">
                              <TABLE cellSpacing="0" cellPadding="0" width="140" align="center" border="0">
                                <TR><TD align="middle" height="120"><A href="product.html#p2" target="_parent"><img src="http://www.noonenet.cn/images/logo.gif" width="112" height="45" border="0"/></A></TD></TR>
                                <TR><TD align="middle" height="20"><A href="product.html#p2" target="_parent">图片二</A></TD></TR>
         </TABLE>
       </TD>
                            <TD align="middle">
                               <TABLE cellSpacing="0" cellPadding="0" width="140" align="center" border="0">
                                <TR><TD align="middle" height="120"><A href="product.html#p3" target="_parent"><img src="http://www.noonenet.cn/images/logo.gif" width="112" height="45" border="0"/></A></TD></TR>
                                <TR><TD align="middle" height="20"><A href="product.html#p3" target="_parent">图片三</A></TD></TR>
          </TABLE>
       </TD>
                            <TD align="middle">
                               <TABLE cellSpacing="0" cellPadding="0" width="140" align="center" border="0">
                                <TR><TD align="middle" height="120"><A href="product.html#p4" target="_parent"><img src="http://www.noonenet.cn/images/logo.gif" width="112" height="45" border="0"/></A></TD></TR>
                                <TR><TD align="middle" height="20"><A href="product.html#p4" target="_parent">图片四</A></TD></TR>
          </TABLE>
       </TD>
                            <TD align="middle">
                               <TABLE cellSpacing="0" cellPadding="0" width="140" align="center" border="0">
                                <TR><TD align="middle" height="120"><A href="product.html#p5" target="_parent"><img src="http://www.noonenet.cn/images/logo.gif" width="112" height="45" border="0"/></A></TD></TR>
                                <TR><TD align="middle" height="20"><A href="product.html#p5" target="_parent">图片五</A></TD></TR>
          </TABLE>
       </TD>
                            <TD align="middle">
                               <TABLE cellSpacing="0" cellPadding="0" width="140" align="center" border="0">
                                <TR><TD align="middle" height="120"><A href="product.html#p5" target="_parent"><img src="http://www.noonenet.cn/images/logo.gif" width="112" height="45" border="0"/></A></TD></TR>
                                <TR><TD align="middle" height="20"><A href="product.html#p5" target="_parent">图片六</A></TD></TR>
          </TABLE>
       </TD>
       <TD align="middle">
                               <TABLE cellSpacing="0" cellPadding="0" width="140" align="center" border="0">
                                <TR><TD align="middle" height="120"><A href="product.html#p5" target="_parent"><img src="http://www.noonenet.cn/images/logo.gif" width="112" height="45" border="0"/></A></TD></TR>
                                <TR><TD align="middle" height="20"><A href="product.html#p5" target="_parent">图片七</A></TD></TR>
          </TABLE>
       </TD>
      </TR></TABLE></TD></TR></TABLE></TD>
     <!-------------------demo2--------------------->
                <TD id=demo2 width="0"></TD>
   </TR></TABLE>
   <SCRIPT language="javascript">
   <!--
    var dir=1 //每步移动像素，大＝快
    var speed=1 //循环周期（毫秒）大＝慢
    document.getElementById("demo2").innerHTML = document.getElementById("demo1").innerHTML;
    function Marquee(){//正常移动
     if (dir>0  && (document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft)<=0) document.getElementById("demo").scrollLeft=0
     if (dir<0 &&(document.getElementById("demo").scrollLeft<=0)) document.getElementById("demo").scrollLeft=document.getElementById("demo2").offsetWidth
     document.getElementById("demo").scrollLeft+=dir
     document.getElementById("demo").onmouseover=function() {clearInterval(MyMar)}//暂停移动
     document.getElementById("demo").onmouseout=function() {MyMar=setInterval(Marquee,speed)}//继续移动
    }
    function r_left(){if (dir=-1)dir=1}//换向左移
    function r_right(){if (dir=1)dir=-1}//换向右移
    
    var MyMar=setInterval(Marquee,speed)
   //-->
   </SCRIPT>
   </div><a onMouseOver="r_right();">[向右]</a>

 

原载: No.1网络工作室 http://www.noonenet.cn/
版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章原始出处、作者信息和本声明。否则将追究法律责任。

Tags:控制滚动方向,连续滚动图片
同类文章：
· js代码 - 全选、取消全选
· ewebeditor编辑器漏洞防范
· Asp - SQL注入防范方法[最终篇]
· Asp - SQL注入原理及防范[高级篇]
· Asp - SQL注入原理及防范[中级篇]
返回新闻列表
top
本站关键字：大连网站制作 - 大连网站建设 - 大连网页制作
CopyRight © 2009-2012 No.1网络工作室 All Rights Reserved  sitemap
地址:大连市甘井子区哲林北园29号 电话:13889684613 E-mail:biz@noonenet.cn QQ:1050706570
logo