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

演示站：http://www.163-3.com

不要以为这是原来的 BIGQI图片滚动展示插件，这是纯DIY出来的效果。

DIY图片整体横向滚动 带左右方向键





2楼后又增加了带方向连续滚动方法。

友情提示：在DIY前把以前的DIY过的内容导出保存，以免发生意想不到的后果。

有两种样式方法请选择使用：

一、图片整体横移方法：
1、后台 门户－模块模板－添加附件模块
2、取名称“图片整体横移”
3、粘贴如下代码：

1. <style type="text/css">  
   
2. <!--
   
3. .panpanluoBox{width:960px;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:936px;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>
     

复制代码

上传左右键图片到static\image\common目录下。      

4、前台DIY:
拉一个100%框架，插入附件模块，数据来源选图片附件；标题长度填写：17
主题方式调用：选是则每个主题1张图片，选否调用每个主题的多张图片
显示条数：14        （要显示多少图片自己看着办）
显示样式：选下拉菜单里"图片整体横移"。
缩略图宽度：108
缩略图高度：87
模块样式中内边距：上 0px   右 0px   下 5px    左 -10px

以上数字根据论坛情况自己调节。
保存收工



************************ 我是分隔线 ************************************


二、带方向图片连续滑动方法（下面有朋友提出要连续滚动）
1、后台 门户－模块模板－添加附件模块
2、取名称“带方向图片连续滚动”
3、粘贴如下代码：

1. <div class="module cl">
   
2. <table border="0" width="960" cellspacing="5" cellpadding="0">
   
3. <tr>
   
4. <td width="11"><img id="r_l" onclick="r_left()"src="static/image/common/panpanluo_button_l.gif">
   
5. </td>
   
6. <td>
   
7. <TABLE cellSpacing=0 cellPadding=0 width=926 border=0>
   
8. <TBODY>
   
9. <TR>
   
10. <TD vAlign=top background="">
    
11. <TABLE cellSpacing=0 cellPadding=0 width=926 border=0>
    
12. <TBODY>
    
13. <TR>
    
14. <TD vAlign=center align=middle >
    
15. <DIV id=demo style="OVERFLOW: hidden; WIDTH: 926px; COLOR: #ffffff; ">
    
16. <TABLE cellPadding=0 width="100%" align=left border=0
    
17. cellspace="0">
    
18. <TBODY>
    
19. <TR>
    
20. <TD id=demo1 vAlign=top>
    
21. <TABLE cellSpacing=1 cellPadding=1>
    
22. <TBODY>
    
23. <TR vAlign=top>
    
24. <TD vAlign=top noWrap>
    
25. <DIV align=right>
    
26. <TABLE cellSpacing=0 cellPadding=0 align=center border=0>
    
27. <TBODY>
    
28. <TR>
    
29. [loop]
    
30. <TD align=middle>
    
31. <TABLE cellSpacing=0 cellPadding=0 width=120
    
32. align=center border=0>
    
33. <TBODY>
    
34. <TR>
    
35. <TD align=middle >
    
36. <a href="{threadurl}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" /></a>
    
37. </TD></TR>
    
38. <TR>
    
39. <TD class=nav1 align=middle ><A
    
40. class=apm2
    
41. href="{threadurl}" title="{threadsubject}"{target}>{threadsubject}</A></TD></TR></TBODY></TABLE></TD>
    
42. [/loop] </TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></TD>
    
43. <TD id=demo2 width="0"></TD>
    
44. </TR></TBODY></TABLE></DIV>
    
45. <SCRIPT>
    
46. var dir=1//每步移动像素，数大为快
    
47. var speed=1//循环周期（毫秒）数大为慢
    
48. demo2.innerHTML=demo1.innerHTML
    
49. function Marquee(){//正常移动
    
50. //alert(demo2.offsetWidth+"\n"+demo.scrollLeft)
    
51. if (dir>0 && (demo2.offsetWidth-demo.scrollLeft)<=0) demo.scrollLeft=0
    
52. if (dir<0 &&(demo.scrollLeft<=0)) demo.scrollLeft=demo2.offsetWidth
    
53. demo.scrollLeft+=dir
    
54. demo.onmouseover=function() {clearInterval(MyMar)}//暂停移动
    
55. demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//继续移动
    
56. }
    
57. function r_left(){if (dir=-1)dir=1}//换向左移
    
58. function r_right(){if (dir=1)dir=-1}//换向右移
    
59. var MyMar=setInterval(Marquee,speed)
    
60. </SCRIPT>
    
61. </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
    
62. </td>
    
63. <td width="11"><img id="r_r" onclick="r_right()" src="static/image/common/panpanluo_button_r.gif">
    
64. </td>
    
65. </tr>
    
66. </table></div>

复制代码

上传左右键图片到static\image\common目录下。      

4、前台DIY:
拉一个100%框架，插入附件模块，数据来源选图片附件；标题长度填写：16
主题方式调用：选是则每个主题1张图片，选否调用每个主题的多张图片
显示条数：10       （要显示多少图片自己看着办）
显示样式：选下拉菜单里"带方向图片连续滚动"。
缩略图宽度：108
缩略图高度：87
模块样式中内边距：上 0px   右 0px   下 0px    左 -15px

以上数字根据论坛情况自己调节。
保存收工

以上两方法选择使用。

觉得好请顶下帖。

关注中，方法呢？

……DIY不是选峰大哥的图片横排滚动插件吗？

尚文龙 发表于 2010-10-2 13:15
……DIY不是选峰大哥的图片横排滚动插件吗？

他发过了？但这个不是插件。

回复 PANPANLUO 的帖子

已经收藏。

(EM:160:)(EM:160:)

插件或修改方法什么时候放出，谢谢

勿忘我科技 发表于 2010-10-2 13:46
插件或修改方法什么时候放出，谢谢

见2楼方法