图片整体滚动效果

最近搞了不少js特效代码，并移植到了discuz的diy中，下面是一种图片整体滚动的效果，代码奉送给大家。这段代码是从http://www.codefans.net上找的，有一个小问题还没解决：点击右边的箭头，图片却向左滚动，点击左边的，图片向右滚动，很是别扭。希望高手们来修正这个bug。
图片的尺寸：宽度：271px；高度：180px；三张图片滚动，比较适合discuz的960px标准宽度。
注意：宽度不要改动；高度可以调整，但是要调整左右箭头图标的位置。
先上图：

用到的素材：需要首先把这两个图片上传至你站点：static/image/common文件夹下；把lee_960_3.js上传到static/js目录下。
左箭头：

右箭头：

可以在”门户-->模块模板“中添加一个帖子模板，把如下代码复制进去，然后前台diy的时候选择这个模板就可以看到图片滚动的效果了。
代码：

1. <style type="text/css">
   
2. .blk_18 a { color:#213f71; font-size:12pt; text-decoration:none;}
   
3. .blk_18 a:hover {color:#0066cc; }
   
4. .blk_18 {
   
5. overflow:hidden;
   
6. zoom:1;
   
7. font-size:12pt;
   
8. border:1px solid #e3e3e3;
   
9. background:transpant;
   
10. width:938px;
    
11. margin-top:8px;
    
12. }
    
13. .blk_18 .pcont {
    
14. width:854px;
    
15. float:left;
    
16. overflow:hidden;
    
17. padding-left:5px;
    
18. }
    
19. .blk_18 .ScrCont {
    
20. width:32766px;
    
21. zoom:1;
    
22. margin-left:-5px;
    
23. }
    
24. .blk_18 #List1_1, .blk_18 #List2_1 {
    
25. float:left;
    
26. }
    
27. .blk_18 .LeftBotton {
    
28. width:29px;
    
29. height:73px;
    
30. float:left;
    
31. background:url(static/image/common/roll_left.gif) no-repeat;
    
32. }
    
33. .blk_18 .RightBotton {
    
34. width:29px;
    
35. height:73px;
    
36. float:right;
    
37. background:url(static/image/common/roll_right.gif) no-repeat;
    
38. }
    
39. .blk_18 .LeftBotton {
    
40. background-position: 0px 0px;
    
41. margin:68px 5px 0px 5px;
    
42. }
    
43. .blk_18 .RightBotton {
    
44. background-position: 0px 0px;
    
45. margin:68px 5px 10px 5px;
    
46. }
    
47. .blk_18 .LeftBotton:hover {
    
48. background-position: 0px -73px;
    
49. }
    
50. .blk_18 .RightBotton:hover {
    
51. background-position: 0px -73px;
    
52. }
    
53. .blk_18 .pl img {
    
54. display:block;
    
55. cursor:pointer;
    
56. border:none;
    
57. margin:6px auto 1px auto;
    
58. }
    
59. .blk_18 .pl {
    
60. width:284px;
    
61. border:1px solid #f3f3f3;
    
62. float:left;
    
63. float:left;
    
64. text-align:center;
    
65. line-height:24px;
    
66. }
    
67. .blk_18 a.pl:hover {
    
68. border:1px solid #5dacec;
    
69. color:#5dacec;
    
70. background:#fff;
    
71. }
    
72. </style>
    
73. 
    
74. <!-- picrotate_left start  -->
    
75. <div class="blk_18"> <a class="LeftBotton" onmousedown="ISL_GoUp_1()" onmouseup="ISL_StopUp_1()" onmouseout="ISL_StopUp_1()" href="javascript:void(0);" target="_self"></a>
    
76.   <div class="pcont" id="ISL_Cont_1">
    
77.     <div class="ScrCont">
    
78.       <div id="List1_1">
    
79.         <!-- piclist begin -->
    
80.                 [loop]
    
81.                         <a class="pl" href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" />{title}</a>
    
82.                 [/loop]
    
83.         <!-- piclist end -->
    
84.       </div>
    
85.       <div id="List2_1"></div>
    
86.     </div>
    
87.   </div>
    
88. <a class="RightBotton" onmousedown="ISL_GoDown_1()" onmouseup="ISL_StopDown_1()" onmouseout="ISL_StopDown_1()" href="javascript:void(0);" target="_self"></a> </div>
    
89. <div class="c"></div>
    
90. <script src="static/js/lee_960_3.js" type="text/javascript"></script>
    
91. <!-- picrotate_left end -->

复制代码

这个是不用上传js的版本，显得代码多了不少。

1. <style type="text/css">
   
2. .blk_18 a { color:#213f71; font-size:12pt; text-decoration:none;}
   
3. .blk_18 a:hover {color:#0066cc; }
   
4. .blk_18 {
   
5. overflow:hidden;
   
6. zoom:1;
   
7. font-size:12pt;
   
8. border:1px solid #e3e3e3;
   
9. background:transpant;
   
10. width:938px;
    
11. margin-top:8px;
    
12. }
    
13. .blk_18 .pcont {
    
14. width:854px;
    
15. float:left;
    
16. overflow:hidden;
    
17. padding-left:5px;
    
18. }
    
19. .blk_18 .ScrCont {
    
20. width:32766px;
    
21. zoom:1;
    
22. margin-left:-5px;
    
23. }
    
24. .blk_18 #List1_1, .blk_18 #List2_1 {
    
25. float:left;
    
26. }
    
27. .blk_18 .LeftBotton {
    
28. width:29px;
    
29. height:73px;
    
30. float:left;
    
31. background:url(static/image/common/roll_left.gif) no-repeat;
    
32. }
    
33. .blk_18 .RightBotton {
    
34. width:29px;
    
35. height:73px;
    
36. float:right;
    
37. background:url(static/image/common/roll_right.gif) no-repeat;
    
38. }
    
39. .blk_18 .LeftBotton {
    
40. background-position: 0px 0px;
    
41. margin:68px 5px 0px 5px;
    
42. }
    
43. .blk_18 .RightBotton {
    
44. background-position: 0px 0px;
    
45. margin:68px 5px 10px 5px;
    
46. }
    
47. .blk_18 .LeftBotton:hover {
    
48. background-position: 0px -73px;
    
49. }
    
50. .blk_18 .RightBotton:hover {
    
51. background-position: 0px -73px;
    
52. }
    
53. .blk_18 .pl img {
    
54. display:block;
    
55. cursor:pointer;
    
56. border:none;
    
57. margin:6px auto 1px auto;
    
58. }
    
59. .blk_18 .pl {
    
60. width:284px;
    
61. border:1px solid #f3f3f3;
    
62. float:left;
    
63. float:left;
    
64. text-align:center;
    
65. line-height:24px;
    
66. }
    
67. .blk_18 a.pl:hover {
    
68. border:1px solid #5dacec;
    
69. color:#5dacec;
    
70. background:#fff;
    
71. }
    
72. </style>
    
73. <script type="text/javascript">
    
74. var Speed_1 = 10; //速度(毫秒)
    
75. var Space_1 = 20; //每次移动(px)
    
76. var PageWidth_1 = 286 * 1; //翻页宽度
    
77. var interval_1 = 5000; //翻页间隔时间
    
78. var fill_1 = 0; //整体移位
    
79. var MoveLock_1 = false;
    
80. var MoveTimeObj_1;
    
81. var MoveWay_1="right";
    
82. var Comp_1 = 0;
    
83. var AutoPlayObj_1=null;
    
84. function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}}
    
85. function AutoPlay_1(){clearInterval(AutoPlayObj_1);AutoPlayObj_1=setInterval('ISL_GoDown_1();ISL_StopDown_1();',interval_1)}
    
86. function ISL_GoUp_1(){if(MoveLock_1)return;clearInterval(AutoPlayObj_1);MoveLock_1=true;MoveWay_1="left";MoveTimeObj_1=setInterval('ISL_ScrUp_1();',Speed_1);}
    
87. function ISL_StopUp_1(){if(MoveWay_1 == "right"){return};clearInterval(MoveTimeObj_1);if((GetObj('ISL_Cont_1').scrollLeft-fill_1)%PageWidth_1!=0){Comp_1=fill_1-(GetObj('ISL_Cont_1').scrollLeft%PageWidth_1);CompScr_1()}else{MoveLock_1=false}
    
88. AutoPlay_1()}
    
89. function ISL_ScrUp_1(){if(GetObj('ISL_Cont_1').scrollLeft<=0){GetObj('ISL_Cont_1').scrollLeft=GetObj('ISL_Cont_1').scrollLeft+GetObj('List1_1').offsetWidth}
    
90. GetObj('ISL_Cont_1').scrollLeft-=Space_1}
    
91. function ISL_GoDown_1(){clearInterval(MoveTimeObj_1);if(MoveLock_1)return;clearInterval(AutoPlayObj_1);MoveLock_1=true;MoveWay_1="right";ISL_ScrDown_1();MoveTimeObj_1=setInterval('ISL_ScrDown_1()',Speed_1)}
    
92. function ISL_StopDown_1(){if(MoveWay_1 == "left"){return};clearInterval(MoveTimeObj_1);if(GetObj('ISL_Cont_1').scrollLeft%PageWidth_1-(fill_1>=0?fill_1:fill_1+1)!=0){Comp_1=PageWidth_1-GetObj('ISL_Cont_1').scrollLeft%PageWidth_1+fill_1;CompScr_1()}else{MoveLock_1=false}
    
93. AutoPlay_1()}
    
94. function ISL_ScrDown_1(){if(GetObj('ISL_Cont_1').scrollLeft>=GetObj('List1_1').scrollWidth){GetObj('ISL_Cont_1').scrollLeft=GetObj('ISL_Cont_1').scrollLeft-GetObj('List1_1').scrollWidth}
    
95. GetObj('ISL_Cont_1').scrollLeft+=Space_1}
    
96. function CompScr_1(){if(Comp_1==0){MoveLock_1=false;return}
    
97. var num,TempSpeed=Speed_1,TempSpace=Space_1;if(Math.abs(Comp_1)<PageWidth_1/2){TempSpace=Math.round(Math.abs(Comp_1/Space_1));if(TempSpace<1){TempSpace=1}}
    
98. if(Comp_1<0){if(Comp_1<-TempSpace){Comp_1+=TempSpace;num=TempSpace}else{num=-Comp_1;Comp_1=0}
    
99. GetObj('ISL_Cont_1').scrollLeft-=num;setTimeout('CompScr_1()',TempSpeed)}else{if(Comp_1>TempSpace){Comp_1-=TempSpace;num=TempSpace}else{num=Comp_1;Comp_1=0}
    
100. GetObj('ISL_Cont_1').scrollLeft+=num;setTimeout('CompScr_1()',TempSpeed)}}
     
101. function picrun_ini(){
     
102. GetObj("List2_1").innerHTML=GetObj("List1_1").innerHTML;
     
103. GetObj('ISL_Cont_1').scrollLeft=fill_1>=0?fill_1:GetObj('List1_1').scrollWidth-Math.abs(fill_1);
     
104. GetObj("ISL_Cont_1").onmouseover=function(){clearInterval(AutoPlayObj_1)}
     
105. GetObj("ISL_Cont_1").onmouseout=function(){AutoPlay_1()}
     
106. AutoPlay_1();
     
107. }
     
108. </script>
     
109. <!-- picrotate_left start  -->
     
110. <div class="blk_18"> <a class="LeftBotton" onmousedown="ISL_GoUp_1()" onmouseup="ISL_StopUp_1()" onmouseout="ISL_StopUp_1()" href="javascript:void(0);" target="_self"></a>
     
111.   <div class="pcont" id="ISL_Cont_1">
     
112.     <div class="ScrCont">
     
113.       <div id="List1_1">
     
114.         <!-- piclist begin -->
     
115.                 [loop]
     
116.                         <a class="pl" href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" />{title}</a>
     
117.                 [/loop]
     
118.         <!-- piclist end -->
     
119.       </div>
     
120.       <div id="List2_1"></div>
     
121.     </div>
     
122.   </div>
     
123. <a class="RightBotton" onmousedown="ISL_GoDown_1()" onmouseup="ISL_StopDown_1()" onmouseout="ISL_StopDown_1()" href="javascript:void(0);" target="_self"></a>
     
124. </div>
     
125. <div class="c"></div>
     
126. <script type="text/javascript">
     
127. <!--
     
128. picrun_ini()
     
129. //-->
     
130. </script>
     
131. <!-- picrotate_left end -->

复制代码

楼主好！非常感谢楼主的分享！有个问题小弟想请教下，这个只能是论坛贴子才能有滚动效果吗？我现在文章模块装了没有滚动效果。希望前辈指点！

可以在“门户-模块模板”中添加一个“文章模块”。注意不是“帖子模块”，这样就可以添加文章里的图片了。
然后前台diy的时候调用这个文章模块的模板就可以了。

风语唐谣 发表于 2014-3-27 21:51
楼主好！非常感谢楼主的分享！有个问题小弟想请教下，这个只能是论坛贴子才能有滚动效果吗？我现在文章模块 ...

太客气，我也是初学者。大家共同学习。

coolmuzi 发表于 2014-3-22 22:38
这个是不用上传js的版本，显得代码多了不少。

支持，不错。顶一下

了解下

大神。这样的，用你的出来滚动的不是图片，是<loop>{title}<loop>是怎么回事

刚刚学习 感觉好复杂呀

有一个小问题还没解决：点击右边的箭头，图片却向左滚动，点击左边的，图片向右滚动，很是别扭。希望高手们来修正这个bug。

这样就可以了

1. <style type="text/css">
   
2. .blk_18 a { color:#213f71; font-size:12pt; text-decoration:none;}
   
3. .blk_18 a:hover {color:#0066cc; }
   
4. .blk_18 {
   
5. overflow:hidden;
   
6. zoom:1;
   
7. font-size:12pt;
   
8. border:1px solid #e3e3e3;
   
9. background:transpant;
   
10. width:938px;
    
11. margin-top:8px;
    
12. }
    
13. .blk_18 .pcont {
    
14. width:854px;
    
15. float:left;
    
16. overflow:hidden;
    
17. padding-left:5px;
    
18. }
    
19. .blk_18 .ScrCont {
    
20. width:32766px;
    
21. zoom:1;
    
22. margin-left:-5px;
    
23. }
    
24. .blk_18 #List1_1, .blk_18 #List2_1 {
    
25. float:left;
    
26. }
    
27. .blk_18 .LeftBotton {
    
28. width:29px;
    
29. height:73px;
    
30. float:left;
    
31. background:url(static/image/common/roll_left.gif) no-repeat;
    
32. }
    
33. .blk_18 .RightBotton {
    
34. width:29px;
    
35. height:73px;
    
36. float:right;
    
37. background:url(static/image/common/roll_right.gif) no-repeat;
    
38. }
    
39. .blk_18 .LeftBotton {
    
40. background-position: 0px 0px;
    
41. margin:68px 5px 0px 5px;
    
42. }
    
43. .blk_18 .RightBotton {
    
44. background-position: 0px 0px;
    
45. margin:68px 5px 10px 5px;
    
46. }
    
47. .blk_18 .LeftBotton:hover {
    
48. background-position: 0px -73px;
    
49. }
    
50. .blk_18 .RightBotton:hover {
    
51. background-position: 0px -73px;
    
52. }
    
53. .blk_18 .pl img {
    
54. display:block;
    
55. cursor:pointer;
    
56. border:none;
    
57. margin:6px auto 1px auto;
    
58. }
    
59. .blk_18 .pl {
    
60. width:284px;
    
61. border:1px solid #f3f3f3;
    
62. float:left;
    
63. float:left;
    
64. text-align:center;
    
65. line-height:24px;
    
66. }
    
67. .blk_18 a.pl:hover {
    
68. border:1px solid #5dacec;
    
69. color:#5dacec;
    
70. background:#fff;
    
71. }
    
72. </style>
    
73. 
    
74. <!-- picrotate_left start  -->
    
75. <div class="blk_18"> <a class="LeftBotton" onmousedown="ISL_GoDown_1()" onmouseup="ISL_StopDown_1()" onmouseout="ISL_StopDown_1()" href="javascript:void(0);" target="_self"></a>
    
76.   <div class="pcont" id="ISL_Cont_1">
    
77.     <div class="ScrCont">
    
78.       <div id="List1_1">
    
79.         <!-- piclist begin -->
    
80.                 [loop]
    
81.                         <a class="pl" href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" />{title}</a>
    
82.                 [/loop]
    
83.         <!-- piclist end -->
    
84.       </div>
    
85.       <div id="List2_1"></div>
    
86.     </div>
    
87.   </div>
    
88. <a class="RightBotton" onmousedown="ISL_GoUp_1()" onmouseup="ISL_StopUp_1()" onmouseout="ISL_StopUp_1()" href="javascript:void(0);" target="_self"></a> </div>
    
89. <div class="c"></div>
    
90. <script src="static/js/lee_960_3.js" type="text/javascript"></script>
    
91. <!-- picrotate_left end -->

复制代码