纯DIY -- 【图片整体横向滚动 带左右方向键 for X1.5正式版】[又增加连续滚动]

回复 PANPANLUO 的帖子

楼主 你演示站 首页幻灯片 效果能否分享下

回复 PANPANLUO 的帖子

怎么会错位？模块模板改写数据，门户宽度930，图片宽度150 高度200

1. <style type="text/css">
   
2. <!--
   
3. .panpanluoBox{width:930px;overflow:hidden;padding:5px 5 5px 5px;margin:0 auto;}
   
4. .panpanluoBox .LeftBotton{height:114px;width:11px;background:url(static/image/common/panpanluo_button_l.gif) no-repeat 0px 0;overflow:hidden;float:left;display:inline;margin:0px 0 0 0;cursor:pointer;}
   
5. .panpanluoBox .RightBotton{height:114px;width:11px;background:url(static/image/common/panpanluo_button_r.gif) no-repeat 0px 0;overflow:hidden;float:left;display:inline;margin:0px 0 0 0;cursor:pointer;}
   
6. .panpanluoBox .Cont{width:930px;overflow:hidden;float:left;}
   
7. .panpanluoBox .ScrCont{width:10000000px;}
   
8. .panpanluoBox .Cont .pic{width:135px;float:left;text-align:center;}
   
9. .panpanluoBox .Cont .pic img{padding:4px;background:#fff;border:1px solid #ccc;display:block;margin:0 auto;}
   
10. .panpanluoBox .Cont .pic p{line-height:26px;color:#505050;}
    
11. .panpanluoBox .Cont a:link,.panpanluoBox .Cont a:visited{color:#626466;text-decoration:none;}
    
12. .panpanluoBox .Cont a:hover{color:#f00;text-decoration:underline;}
    
13. .panpanluoBox #List1,.panpanluoBox #List2{float:left;}
    
14. -->
    
15. </style>
    
16. <div class="module cl ml">
    
17. <div class="panpanluoBox">
    
18. <div class="LeftBotton" onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()"></div>
    
19. <div class="Cont" id="ISL_Cont">
    
20. <div class="ScrCont">
    
21. <div id="List1">
    
22. <!-- 图片载入 begin -->
    
23. [loop]
    
24. <div class="pic">
    
25. <a href="{threadurl}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" /></a>
    
26. <p><a href="{threadurl}" title="{threadsubject}"{target}>{threadsubject}</a></p>
    
27. </div>
    
28. [/loop]
    
29. <!-- 图片载入 end -->
    
30. </div>
    
31. <div id="List2"></div>
    
32. </div>
    
33. </div>
    
34. <div class="RightBotton" onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()"></div>
    
35. </div>
    
36. </div>
    
37. </div>
    
38. <script language="javascript" type="text/javascript">
    
39. <!--//--><![CDATA[//><!--
    
40. var Speed = 1; //速度(毫秒)
    
41. var Space = 5; //每次移动(px)
    
42. var PageWidth = 945; //移位宽度
    
43. var fill = 0; //整体移动
    
44. var MoveLock = false;
    
45. var MoveTimeObj;
    
46. var Comp = 0;
    
47. var AutoPlayObj = null;
    
48. GetObj("List2").innerHTML = GetObj("List1").innerHTML;
    
49. GetObj('ISL_Cont').scrollLeft = fill;
    
50. GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj);}
    
51. GetObj("ISL_Cont").onmouseout = function(){AutoPlay();}
    
52. AutoPlay();
    
53. function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}}
    
54. function AutoPlay(){ //自动滚动
    
55. clearInterval(AutoPlayObj);
    
56. AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',5000); //间隔时间
    
57. }
    
58. function ISL_GoUp(){
    
59. if(MoveLock) return;
    
60. clearInterval(AutoPlayObj);
    
61. MoveLock = true;
    
62. MoveTimeObj = setInterval('ISL_ScrUp();',Speed);
    
63. }
    
64. function ISL_StopUp(){
    
65. clearInterval(MoveTimeObj);
    
66. if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0){
    
67. Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth);
    
68. CompScr();
    
69. }else{
    
70. MoveLock = false;
    
71. }
    
72. AutoPlay();
    
73. }
    
74. function ISL_ScrUp(){
    
75. if(GetObj('ISL_Cont').scrollLeft <= 0){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth}
    
76. GetObj('ISL_Cont').scrollLeft -= Space ;
    
77. }
    
78. function ISL_GoDown(){
    
79. clearInterval(MoveTimeObj);
    
80. if(MoveLock) return;
    
81. clearInterval(AutoPlayObj);
    
82. MoveLock = true;
    
83. ISL_ScrDown();
    
84. MoveTimeObj = setInterval('ISL_ScrDown()',Speed);
    
85. }
    
86. function ISL_StopDown(){
    
87. clearInterval(MoveTimeObj);
    
88. if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 ){
    
89. Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill;
    
90. CompScr();
    
91. }else{
    
92. MoveLock = false;
    
93. }
    
94. AutoPlay();
    
95. }
    
96. function ISL_ScrDown(){
    
97. if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft - GetObj
    
98. 
    
99. ('List1').scrollWidth;}
    
100. GetObj('ISL_Cont').scrollLeft += Space ;
     
101. }
     
102. function CompScr(){
     
103. var num;
     
104. if(Comp == 0){MoveLock = false;return;}
     
105. if(Comp < 0){
     
106. if(Comp < -Space){
     
107. Comp += Space;
     
108. num = Space;
     
109. }else{
     
110. num = -Comp;
     
111. Comp = 0;
     
112. }
     
113. GetObj('ISL_Cont').scrollLeft -= num;
     
114. setTimeout('CompScr()',Speed);
     
115. }else{
     
116. if(Comp > Space){
     
117. Comp -= Space;
     
118. num = Space;
     
119. }else{
     
120. num = Comp;
     
121. Comp = 0;
     
122. }
     
123. GetObj('ISL_Cont').scrollLeft += num;
     
124. setTimeout('CompScr()',Speed);
     
125. }
     
126. }
     
127. //--><!]]>
     
128. </script>

复制代码

这个要留名。。。。

这个不错

我的门户宽度就是960的      为什么还长出来   对不齐呢？

楼主  怎么弄？

留纪念

回复 PANPANLUO 的帖子

顶你！

收藏备用