图片翻页滚动效果(JavaScript)

None.gif < html >< head >
None.gif
None.gif
< meta http - equiv = 'Content - Type' content = 'text / html; charset = gb2312' >
None.gif
None.gif
< script language = 'JavaScript' >
None.gif
None.gif
var  scrollerheight = 160 ;                                                 // 定义每个区域显示的高度
None.gif

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

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

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

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

None.gif
var  s_tmp  =   0                                                                               // 初始移动次数
None.gif

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

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

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

None.gif 
None.gif
None.gif
// ********************************************
None.gif

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

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

None.gif
var  newwin;
None.gif
None.gif
var  isDebug  =   1 ;
None.gif
None.gif
function  trace(s)
None.gif
ExpandedBlockStart.gifContractedBlock.gif
dot.gif {
InBlock.gif
InBlock.gif       
if(isDebug)
InBlock.gif
ExpandedSubBlockStart.gifContractedSubBlock.gif       
dot.gif{
InBlock.gif
InBlock.gif              
try
InBlock.gif
ExpandedSubBlockStart.gifContractedSubBlock.gif              
dot.gif{
InBlock.gif
InBlock.gif                     newwin.document.write(s 
+ "<BR>");
InBlock.gif
ExpandedSubBlockEnd.gif              }

InBlock.gif
InBlock.gif              
catch(e)
InBlock.gif
ExpandedSubBlockStart.gifContractedSubBlock.gif              
dot.gif{
InBlock.gif
InBlock.gif                     newwin 
= window.open("","trace");
InBlock.gif
InBlock.gif                     newwin.document.write(s 
+ "<BR>");
InBlock.gif
ExpandedSubBlockEnd.gif              }

InBlock.gif
ExpandedSubBlockEnd.gif       }
      
InBlock.gif
ExpandedBlockEnd.gif}

None.gif
None.gif
// **********************************************
None.gif

None.gif
// 初始化滚动函数
None.gif

ExpandedBlockStart.gifContractedBlock.gif
function  startscroll() dot.gif {
InBlock.gif
InBlock.gif       
InBlock.gif
InBlock.gif       
//随机获取初始区域
InBlock.gif

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

InBlock.gif       i
=0;
InBlock.gif
InBlock.gif       
for(i in scroll_content)n_panel++;
InBlock.gif
InBlock.gif       n_panel 
= n_panel -1;
InBlock.gif
InBlock.gif       startPanel 
= Math.round(Math.random()*n_panel);
InBlock.gif
InBlock.gif 
InBlock.gif
InBlock.gif       
//如果初始区域是第一个元素,
InBlock.gif

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

InBlock.gif       
if(startPanel == 0
InBlock.gif
ExpandedSubBlockStart.gifContractedSubBlock.gif       
dot.gif{
InBlock.gif
InBlock.gif              i
=0;
InBlock.gif
InBlock.gif              
for(i in scroll_content)
InBlock.gif
InBlock.gif                     insert_area(total_area, total_area
++); 
InBlock.gif
ExpandedSubBlockEnd.gif       }

InBlock.gif
InBlock.gif       
else 
InBlock.gif
InBlock.gif              
//如果初始区域是最后一个元素
InBlock.gif

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

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

ExpandedSubBlockStart.gifContractedSubBlock.gif              
dot.gif{
InBlock.gif
InBlock.gif                     insert_area(startPanel, total_area);
InBlock.gif
InBlock.gif                     total_area
++;
InBlock.gif
InBlock.gif                     
for(i=0; i<startPanel; i++)
InBlock.gif
ExpandedSubBlockStart.gifContractedSubBlock.gif                     
dot.gif{
InBlock.gif
InBlock.gif                            insert_area(i,total_area);
InBlock.gif
InBlock.gif                            total_area
++;
InBlock.gif
ExpandedSubBlockEnd.gif                     }

InBlock.gif
ExpandedSubBlockEnd.gif              }

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

InBlock.gif              
//先把当前区域装进DIV,
InBlock.gif

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

InBlock.gif              
if((startPanel > 0|| (startPanel < n_panel)) 
InBlock.gif
ExpandedSubBlockStart.gifContractedSubBlock.gif              
dot.gif{
InBlock.gif
InBlock.gif                     insert_area(startPanel,total_area);
InBlock.gif
InBlock.gif                     total_area
++;
InBlock.gif
InBlock.gif                     
for(i=startPanel+1; i<=n_panel; i++)
InBlock.gif
ExpandedSubBlockStart.gifContractedSubBlock.gif                     
dot.gif{
InBlock.gif
InBlock.gif                            insert_area(i,total_area);
InBlock.gif
InBlock.gif                            total_area
++;
InBlock.gif
ExpandedSubBlockEnd.gif                     }

InBlock.gif
InBlock.gif                     
for(i=0; i<startPanel; i++)
InBlock.gif
ExpandedSubBlockStart.gifContractedSubBlock.gif                     
dot.gif{
InBlock.gif
InBlock.gif                            insert_area(i,total_area);
InBlock.gif
InBlock.gif                            total_area
++;
InBlock.gif
ExpandedSubBlockEnd.gif                     }

InBlock.gif
ExpandedSubBlockEnd.gif              }

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

InBlock.gif       window.setTimeout('scrolling()',waitingtime);
InBlock.gif
ExpandedBlockEnd.gif}

None.gif
None.gif 
None.gif
None.gif 
None.gif
None.gif
// 滚动函数
None.gif

None.gif
function  scrolling()
None.gif
ExpandedBlockStart.gifContractedBlock.gif
dot.gif {
InBlock.gif
InBlock.gif       
//判断鼠标是否放上去,并且是否在等待
InBlock.gif

InBlock.gif       
if(bMouseOver && wait_flag) 
InBlock.gif
ExpandedSubBlockStart.gifContractedSubBlock.gif       
dot.gif{
InBlock.gif
InBlock.gif              trace(
"----------------------------");
InBlock.gif
InBlock.gif              
for(i=0;i<total_area;i++)
InBlock.gif
ExpandedSubBlockStart.gifContractedSubBlock.gif              
dot.gif{
InBlock.gif
InBlock.gif                     
//每次所有区域同意向上移动scrollspeed个象素
InBlock.gif

InBlock.gif                     tmp 
= document.getElementById('scroll_area'+i).style;
InBlock.gif
InBlock.gif                     tmp.top 
= parseInt(tmp.top) - scrollspeed;  
InBlock.gif
InBlock.gif                     
InBlock.gif
InBlock.gif                     
if(i==0)trace("第一个区域的顶部"+parseInt(tmp.top));
InBlock.gif
InBlock.gif                     
//如果从屏幕种移出1个区域的话,被移出的区域从底部出现
InBlock.gif

InBlock.gif                     
if (parseInt(tmp.top) <= -scrollerheight) 
InBlock.gif
ExpandedSubBlockStart.gifContractedSubBlock.gif                     
dot.gif{
InBlock.gif
InBlock.gif                            tmp.top 
= scrollerheight*(total_area-1);
InBlock.gif
ExpandedSubBlockEnd.gif                     }

InBlock.gif
InBlock.gif                     
InBlock.gif
InBlock.gif                     trace(
"移动次数:"+s_tmp);
InBlock.gif
InBlock.gif                     
//s_tmp是向上移动的次数,按理说应该移动到正好要移动的象素就该停止了
InBlock.gif

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

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

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

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

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

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

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

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

InBlock.gif                     
if(s_tmp++ > (s_amount-1)*scroll_content.length) 
InBlock.gif
ExpandedSubBlockStart.gifContractedSubBlock.gif                     
dot.gif{
InBlock.gif
InBlock.gif                            trace(
"(s_amount-1)*scroll_content.length="+(s_amount-1)*scroll_content.length)
InBlock.gif
InBlock.gif                            wait_flag
=false;//进入等待
InBlock.gif

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

InBlock.gif                            window.setTimeout('wait_flag
=true;s_tmp=0;',waitingtime);
InBlock.gif
ExpandedSubBlockEnd.gif                     }

InBlock.gif
ExpandedSubBlockEnd.gif              }

InBlock.gif
ExpandedSubBlockEnd.gif       }

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

InBlock.gif       window.setTimeout('scrolling()',
1);
InBlock.gif
ExpandedBlockEnd.gif}

None.gif
None.gif 
None.gif
None.gif
function  insert_area(idx, n)
None.gif
ExpandedBlockStart.gifContractedBlock.gif
dot.gif {
InBlock.gif
InBlock.gifhtml
='<div style="left: 0px; width: 100%; position: absolute; top: '+(scrollerheight*n)+'px" id="scroll_area'+n+'">';
InBlock.gif
InBlock.gifhtml
+=scroll_content[idx]+'';html+='</div>';document.write(html);
InBlock.gif
ExpandedBlockEnd.gif}

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

None.gif 
None.gif
None.gifscroll_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>';
None.gif

None.gifscroll_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>';
None.gif

None.gifscroll_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>';
None.gif

None.gifstartscroll();
</ script >
None.gif


From: http://onlytiancai.cnblogs.com/archive/2005/07/27/201013.html

转载于:https://www.cnblogs.com/xiaodi/archive/2006/04/10/371641.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值