时尚前沿的图片左右滚动效果-2

1.增加动态效果

    在滚动区域外围包裹如下HTML

 1 <div class="rollBox">
 2      <div class="Cont" id="ISL_Cont">
 3       <div class="ScrCont">
 4        <div id="List1">
 5   
 6        <!--滚动区域开始-->
 7            ......
 8        <!--滚动区域结束-->
 9         
10        </div>
11        <div id="List2"></div>
12       </div>
13     </div>
14  </div>
15 
16 <!--左右切换按扭结束-->
17     <a href="#" class="dirl"  onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()"></a>
18     <a href="#" class="dirr" onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()"></a>
19 <!--左右切换按扭结束-->

    新增css 样式（可以作为模板）

1  /*滚动样式*/
2  .rollBox{width:1000px;overflow:hidden;}
3  .rollBox .Cont{width:1000px;overflow:hidden;float:left;}
4  .rollBox .ScrCont{width:10000000px;}
5  .rollBox #List1,.rollBox #List2{float:left;}

 

     js文件

 1 <!--//--><![CDATA[//><!--
 2 //图片滚动列表 mengjia 070816
 3 var Speed = 1; //速度(毫秒)
 4 var Space = 20; //每次移动(px)
 5 var PageWidth = 1000; //翻页宽度
 6 var fill = 0; //整体移位
 7 var MoveLock = false;
 8 var MoveTimeObj;
 9 var Comp = 0;
10 var AutoPlayObj = null;
11 GetObj("List2").innerHTML = GetObj("List1").innerHTML;
12 GetObj('ISL_Cont').scrollLeft = fill;
13 GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj);}
14 GetObj("ISL_Cont").onmouseout = function(){AutoPlay();}
15 AutoPlay();
16 function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}}
17 function AutoPlay(){ //自动滚动
18  clearInterval(AutoPlayObj);
19  AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',3000); //间隔时间
20 }
21 function ISL_GoUp(){ //上翻开始
22  if(MoveLock) return;
23  clearInterval(AutoPlayObj);
24  MoveLock = true;
25  MoveTimeObj = setInterval('ISL_ScrUp();',Speed);
26 }
27 function ISL_StopUp(){ //上翻停止
28  clearInterval(MoveTimeObj);
29  if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0){
30   Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth);
31   CompScr();
32  }else{
33   MoveLock = false;
34  }
35  AutoPlay();
36 }
37 function ISL_ScrUp(){ //上翻动作
38  if(GetObj('ISL_Cont').scrollLeft <= 0){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth}
39  GetObj('ISL_Cont').scrollLeft -= Space ;
40 }
41 function ISL_GoDown(){ //下翻
42  clearInterval(MoveTimeObj);
43  if(MoveLock) return;
44  clearInterval(AutoPlayObj);
45  MoveLock = true;
46  ISL_ScrDown();
47  MoveTimeObj = setInterval('ISL_ScrDown()',Speed);
48 }
49 function ISL_StopDown(){ //下翻停止
50  clearInterval(MoveTimeObj);
51  if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 ){
52   Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill;
53   CompScr();
54  }else{
55   MoveLock = false;
56  }
57  AutoPlay();
58 }
59 function ISL_ScrDown(){ //下翻动作
60  if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;}
61  GetObj('ISL_Cont').scrollLeft += Space ;
62 }
63 function CompScr(){
64  var num;
65  if(Comp == 0){MoveLock = false;return;}
66  if(Comp < 0){ //上翻
67   if(Comp < -Space){
68    Comp += Space;
69    num = Space;
70   }else{
71    num = -Comp;
72    Comp = 0;
73   }
74   GetObj('ISL_Cont').scrollLeft -= num;
75   setTimeout('CompScr()',Speed);
76  }else{ //下翻
77   if(Comp > Space){
78    Comp -= Space;
79    num = Space;
80   }else{
81    num = Comp;
82    Comp = 0;
83   }
84   GetObj('ISL_Cont').scrollLeft += num;
85   setTimeout('CompScr()',Speed);
86  }
87 }
View Code

 

 

posted @ 2014-04-11 00:08  未来动力  阅读(287)  评论(0)    收藏  举报