zoukankan      html  css  js  c++  java
  • 图片翻页滚动效果(JavaScript)

    <html><head>

    <meta http-equiv='Content-Type' content='text/html; charset=gb2312'>

    <script language='JavaScript'>

    var scrollerheight=160;                                                //定义每个区域显示的高度

    var html,total_area=0,wait_flag=true;      //初始化html串,总显示区域数,是否等待.

    var bMouseOver = 1;                                            //鼠标放上去就不滚动了,这里硬编码为true

    var scrollspeed = 5;                                                     //滚动速度,其实是每次向上移动的象素数,值越大看起来越快

    var waitingtime = 5000;                                         //每次翻动的等待时间,单位毫秒

    var s_tmp = 0                                                                             //初始移动次数

    var s_amount = 32;                                                      //它的值是由每次需要移动的象素除以scrollspeed换算出来的

    var scroll_content=new Array();                     //声明一个数组

    var startPanel=0, n_panel=0, i=0;           //声明初始区域,区域个数和循环变量

     

    //********************************************

    //这是我做的一个跟踪变量函数

    //在需要使用跟踪变量的地方直接调用trace()函数就可以了.

    var newwin;

    var isDebug = 1;

    function trace(s)

    {

           
    if(isDebug)

           
    {

                  
    try

                  
    {

                         newwin.document.write(s 
    + "<BR>");

                  }


                  
    catch(e)

                  
    {

                         newwin 
    = window.open("","trace");

                         newwin.document.write(s 
    + "<BR>");

                  }


           }
          

    }


    //**********************************************

    //初始化滚动函数

    function startscroll(){

           

           
    //随机获取初始区域

           
    //startPanel是0到scroll_content下标的任意数

           i
    =0;

           
    for(i in scroll_content)n_panel++;

           n_panel 
    = n_panel -1;

           startPanel 
    = Math.round(Math.random()*n_panel);

     

           
    //如果初始区域是第一个元素,

           
    //调用insert_area把scroll_content里所有元素都装到DIV里

           
    if(startPanel == 0

           
    {

                  i
    =0;

                  
    for(i in scroll_content)

                         insert_area(total_area, total_area
    ++); 

           }


           
    else 

                  
    //如果初始区域是最后一个元素

                  
    //先把最后一个装进DIV,然后依次把其它元素装进DIY

                  
    if(startPanel == n_panel) //如果是最后一个元素

                  
    {

                         insert_area(startPanel, total_area);

                         total_area
    ++;

                         
    for(i=0; i<startPanel; i++)

                         
    {

                                insert_area(i,total_area);

                                total_area
    ++;

                         }


                  }


           
    else

                  
    //如果初始区域不是第一个,也不是最后一个

                  
    //先把当前区域装进DIV,

                  
    //然后再把当前区域之前和之后的区域装进DIV

                  
    if((startPanel > 0|| (startPanel < n_panel)) 

                  
    {

                         insert_area(startPanel,total_area);

                         total_area
    ++;

                         
    for(i=startPanel+1; i<=n_panel; i++)

                         
    {

                                insert_area(i,total_area);

                                total_area
    ++;

                         }


                         
    for(i=0; i<startPanel; i++)

                         
    {

                                insert_area(i,total_area);

                                total_area
    ++;

                         }


                  }


           
    //每隔waitingtime的时间调用一次scrolling()函数

           window.setTimeout('scrolling()',waitingtime);

    }


     

     

    //滚动函数

    function scrolling()

    {

           
    //判断鼠标是否放上去,并且是否在等待

           
    if(bMouseOver && wait_flag) 

           
    {

                  trace(
    "----------------------------");

                  
    for(i=0;i<total_area;i++)

                  
    {

                         
    //每次所有区域同意向上移动scrollspeed个象素

                         tmp 
    = document.getElementById('scroll_area'+i).style;

                         tmp.top 
    = parseInt(tmp.top) - scrollspeed;  

                         

                         
    if(i==0)trace("第一个区域的顶部"+parseInt(tmp.top));

                         
    //如果从屏幕种移出1个区域的话,被移出的区域从底部出现

                         
    if (parseInt(tmp.top) <= -scrollerheight) 

                         
    {

                                tmp.top 
    = scrollerheight*(total_area-1);

                         }


                         

                         trace(
    "移动次数:"+s_tmp);

                         
    //s_tmp是向上移动的次数,按理说应该移动到正好要移动的象素就该停止了

                         
    //因为一次向上移动scrollspeed个象素,本例子中一次翻动要移动的象素就是scrollerheight

                         
    //当然你也可以一次翻动两个scrollerheight

                         
    //所以要移动scrollerheight/scrollspeed次,s_amount就是这样算出来的.               

                         
    //因为s_tmp是从0初始化的,所以减去1后才是真正一次翻动要移动的次数

                         
    //但是呢,因为执行一次scrolling()函数,s_tmp就会增加scroll_content.length多次,

                         
    //所以移动的次数应当是(s_amount-1)*scroll_content.length),

                         
    //当翻动次数大于我们算出来的值的时候就要停止,也就是把向上移动的必要条件去调

                         
    //这从跟踪变量的输出可以看出来

                         
    if(s_tmp++ > (s_amount-1)*scroll_content.length) 

                         
    {

                                trace(
    "(s_amount-1)*scroll_content.length="+(s_amount-1)*scroll_content.length)

                                wait_flag
    =false;//进入等待

                                
    //等待waitingtime,再消除等待,并且吧s_tmp归零.

                                window.setTimeout('wait_flag
    =true;s_tmp=0;',waitingtime);

                         }


                  }


           }


           
    //设置1秒钟执行1000次本函数

           window.setTimeout('scrolling()',
    1);

    }


     

    function insert_area(idx, n)

    {

    html
    ='<div style="left: 0px;  100%; position: absolute; top: '+(scrollerheight*n)+'px" id="scroll_area'+n+'">';

    html
    +=scroll_content[idx]+'';html+='</div>';document.write(html);

    }


    //下面的部分可以由asp循环生成

     

    scroll_content[
    0= '<table height=140 align=center border=0 width=300 id=0><tr><td><a href=# target=_blank><IMG SRC=http://onlytiancai/bak/77love/UploadAdPic/200572695027151.gif width=307 height=140 border=0></a></td></tr></table>';

    scroll_content[
    1= '<table height=140 align=center border=0 width=300 id=1><tr><td><a href=# target=_blank><IMG SRC=http://onlytiancai/bak/77love/UploadAdPic/200572694642351.jpg width=307 height=140 border=0></a></td></tr></table>';

    scroll_content[
    2= '<table height=140 align=center border=0 width=300 id=2><tr><td><a href=# target=_blank><IMG SRC=http://onlytiancai/bak/77love/UploadAdPic/200572694652122.jpg width=307 height=140 border=0></a></td></tr></table>';

    startscroll();
    </script>


    From: http://onlytiancai.cnblogs.com/archive/2005/07/27/201013.html
  • 相关阅读:
    微信公众平台可通过UnionID机制在多公众号间帐号互通
    草根玩微博 中产玩微信 土豪玩什么?支持Yo的iWatch?
    The Model Complexity Myth
    BuzzSumo:什么样的文章能获得疯转?(基于1亿篇文章大数据分析)
    深度学习成长的烦恼
    猜你喜欢-----推荐系统原理介绍
    程序设计小问题
    机器学习是什么--周志华
    提高matlab运行速度和节省空间的心得
    matlab提速技巧(自matlab帮助文件)
  • 原文地址:https://www.cnblogs.com/xiaodi/p/371641.html
Copyright © 2011-2022 走看看