图片翻页滚动效果

最新推荐文章于 2022-12-08 13:53:34 发布
xinem
最新推荐文章于 2022-12-08 13:53:34 发布
阅读量1.9k
点赞数
分类专栏： JavaScript 文章标签： scroll insert javascript border html div
本文链接：https://blog.csdn.net/xinem/article/details/2790545
版权
JavaScript 专栏收录该内容
4 篇文章 0 订阅
订阅专栏
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; width: 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>
 
xinem
关注
0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
图片翻页滚动效果

JavaScript实现的图片翻页滚动效果Content-Type content=text/html; charset=gb2312>JavaScript>var scrollerheight=160; //定义每个区域显示的高度var html,total_area=0,wait_flag
复制链接

扫一扫