javascript实现产品图片连续不断滚动

方法一:
scroll.js文件:

<!--//
    var x = 0;
    var y = 0;
    var limdex = 300;
    var dest = 0;
    var distance = 0;
    var step = 0;
    var destination = 0;
    var on = true;

function scrollit(destination) {
    step = 2;
    dest = destination;
    if (x<dest & x < limdex){
        while (x<dest) {
            step += (step / 7);
            x += step;
            scroll(x,0);
        }  
                        // top.main.scroll(dest,0);
        if(dest <=limdex) { scroll(dest,0); }
        x = dest;
    }
    if (x > dest)  {
        while (x>dest) {
            step += (step / 7);
            if(x >= (0+step)) { x -= step; scroll(x,0); }
            else break;
        }
        if(dest >= 0) { scroll(dest,0); }
        x = dest;
    }
    if (x<1) { scroll(1,0); x=1 }
    if (x>limdex) { scroll(limdex,0); x=limdex }
    x = dest;
}

function scrollnow() {
                if (on){
                if (x < limdex & x >= 0 ) {              
                                scroll(x,0);
                            
                        x = x + 1;
                        
                        setTimeout('scrollnow()', 30);
        
                }
                else if (x < 0) {
                
                        x = limdex;
                        scrollnow();
                }
            else {
                
                x=0;
                scrollnow();
                }
                }

}

function stopscroll() {
        if (on){
        on = false;
        }
        else {
        on = true;
        scrollnow();
        }
        
}
function startscroll() { on = true; scrollnow(); }
function stop_start() { 
    if (on){ on = false;}else { on = true;scrollnow();}
}

scrollnow();


//-->

在网页中引用:

<iframe src="ehibition/pro_scroll_.asp"  width="100%" height="130" frameborder="no" scrolling="no" marginwidth="0"></iframe>

pro_scroll.asp文件:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!--#include file="../include/allInclude.asp"-->
<%response.charset=utf-8%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="/css/style.css" rel="stylesheet" type="text/css">
<script language="javascript">
 function DrawImage(ImgD,width,height)
  { 
     var image=new Image(); 
     image.src=ImgD.src;
    if(image.width/image.height>=width/height)
    { 
        if(image.width>=width) 
        {
               ImgD.width=width; 
            ImgD.height=(image.height*width)/image.width; 
        }
        else
        { 
            ImgD.width=image.width;
            ImgD.height=image.height; 
        }
    }
    else
    {
        if(image.height>=height)
        {
            ImgD.height=height; 
            ImgD.width=(image.width*height)/image.height; 
        }
        else
        { 
            ImgD.width=image.width;
            ImgD.height=image.height; 
        } 
    } 
}
            
</script>
<script language="javascript" src="/javascript/scroll.js"></script>
<%
dim pro_authority,strSqlCommend
if session("MemberLevel")="" then
    pro_authority=",0,"
else
    pro_authority=","&session("MemberLevel")&","
end if

strSqlCommend="SELECT  * FROM t_product where pro_commend=1 and pro_show=1 and (','+pro_authority like '%" &pro_authority& "%') order by pro_commend_order"

set show_rs=Server.CreateObject("ADODB.Recordset")
show_rs.Open strSqlCommend,conn,1,1
   if show_rs.EOF  then
        Response.Write("没有找到相关产品信息！")
    else                   
    %>
<table width="100%" height="125" border="0" align="center">
  <tr>
    <%
              dim url
             do while not show_rs.eof
                pro_id=show_rs("pro_id")
                pro_name=show_rs("pro_name")
                if show_rs("pro_breviary_img")<>"" then
                    pro_img=show_rs("pro_breviary_img")
                else
                    pro_img="none.jpg"
                end if
                url = "/ehibition/ehibition_default.asp?pro_id=" & pro_id
            %>
        <td width="110" align="center">
        <table width="110" align="center" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td align="center"  height="100" valign="middle"><a href="<%=url%>" title="<%=repHtmlCode(pro_name)%>" target="blank"><img src="../manage/uploadfiles/<%=pro_img%>" onload="javascript:DrawImage(this,'100','100');" border="0" onmouseover='javascript:stopscroll();' onmouseout='javascript:startscroll();'></a></td>
            </tr>
               <td  align="center" height="20" onmouseover='javascript:stopscroll();' onmouseout='javascript:startscroll();'><img src="../images/ar_org.gif"><a href="<%=url%>" title="<%=repHtmlCode(pro_name)%>" target="blank"><%=shortwords(repHtmlCode(pro_name),7)%></a></td>
            </tr>
        </table>
        </td>
<%
            show_rs.MoveNext
         loop
    end if
   show_rs.Close()
   set show_rs= nothing
 %>
 </td>
 </tr>
</table>

 

方法二：(使用div实现)

<div id=demo style="overflow: hidden; width: 100%;height:130px;">
   <table cellSpacing="0" cellPadding="0" align="left" border="0" cellspace="0" ID="Table7">
     <tr>
     <td id=demo1 vAlign="top">
           <!--#include file="ehibition/pro_scroll.asp"-->
    </td>
   <td id=demo2 vAlign="top">&nbsp;</td>
    </tr>
   </table>
  </div>
   <script>
   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>
向上滚动
<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>