论坛首页diy一个滚动图片的功能

求一个，论坛首页diy一个滚动图片的插件或者方法【使用discuz自带的diy功能能不能实现呢】（插件的话请给出对应的链接，diy教程的话请告知教程地址），对于特殊的，本人可以给微信现金红包！

https://discuz.dismall.com/thread-3650430-1-1.html

https://addon.dismall.com/index.ph ... p;type=0&page=1

https://discuz.dismall.com/thread-3650430-1-1.html

因该主题已不能回覆查看内容，以下是该主题的隐藏内容。

<!--正文开始-->

效果图：

具体的效果到这里查看（图片并不能体现完整的效果）：
最胸萝莉李淑洁曝私照 最“胸”的大白T恤VS开胸T恤
http://www.chinagirlol.cc/thread-5498-1-1.html

分两个版本：

第一个需要根据不同的宽高调整代码【建议大家使用这个，如果需要调整高度，可以人工改一下就是了】

第二个自动的（不过使用了CSS3，低版本浏览器兼容未做测试，在此特别感谢：，互助团队成员，www.discuzlab.com 站长 风乱流年 的帮助）

使用方法（以帖子内容页做说明，实际你可以任意添加到各种页面各种框架）：

1.进入帖子内容页DIY模式添加3:1框架
2.给两个框架分别添加一个帖子模块，第一个帖子模块调用数据（附件模式，建议图片宽度155*200【要根据你论坛的宽度设置】）建议4-10条，标题20字节，第二个建议8条数据
3.给框架，模块设置样式为无边框且无边距
4.分别将以下代码添加到对应的模块自定义样式中

1. <！--版本一-->
   
2. 
   
3. 帖子列表：
   
4. 
   
5. <style type="text/css">
   
6. /*#diynavtop .block { margin: 0; } *非必须*/
   
7. .bbf_thdli_26_16 { position: relative; border: 1px solid #ccc; border-left: none; border-radius: 5px; padding: 0px 5px; }
   
8. .bbf_thdli_26_16 em { position: absolute; right: 0; }
   
9. .bbf_thdli_26_16 li { margin: 2px 0; height: 24px; overflow: hidden; }
   
10. .bbf_thdli_26_16 a.forum { color: #f60; font-size: 16px; }
    
11. .bbf_thdli_26_16 a.thread { height:24px; line-height: 26px; font-size:16px; }
    
12. </style>
    
13. <div class="bbf_thdli_26_16 cl">
    
14.     <ul>
    
15.         [loop]
    
16.         <li><a class="forum" href="{forumurl}"> {forumname} | </a> <a class="thread" href="{url}" title="{title}"{target}>{title}</a></li>
    
17.         [/loop]
    
18.     </ul>
    
19. </div>
    
20. 
    
21. 图片列表：
    
22.     <style type="text/css">
    
23.     .bbf_slide_lr_1 {
    
24.             margin-bottom: 10px;
    
25.         padding: 5px 35px;
    
26.         position: relative;
    
27.         border: 1px solid #ccc;
    
28.         border-right: none;
    
29.         border-radius: 5px;
    
30.     }
    
31.     .bbf_slide_lr_1 li {
    
32.         float: left;
    
33.         overflow: hidden;
    
34.         padding: 0 3px;
    
35.         text-align: center;
    
36.     }
    
37.     .bbf_slide_lr_1 li a {
    
38.             display: block;
    
39.     }
    
40.     .bbf_slide_lr_1 .slidebarbtn {
    
41.         display: block;
    
42.         font-family: Geneva,sans-serif;
    
43.         font-size: 36px;
    
44.         height: 80px;
    
45.         line-height: 80px;
    
46.         position: absolute;
    
47.         text-align: center;
    
48.         width: 28px;
    
49.         background: none repeat scroll 0 0 #f2f2f2;
    
50.         border: 1px solid #cdcdcd;
    
51.         color: #333;
    
52.             border-radius: 5px;
    
53.     }
    
54.     .bbf_slide_lr_1 .slidebarbtn:hover {
    
55.         text-decoration: none;
    
56.     }
    
57.     .bbf_slide_lr_1 .slidebarbtn:hover {
    
58.         background: none repeat scroll 0 0 #fcc9a4;
    
59.         border: 1px solid #cdcdcd;
    
60.         color: #fff;
    
61.     }
    
62.     .bbf_slide_lr_1 .slidebarup {
    
63.         left: 5px;
    
64.         top: 66px;
    
65.     }
    
66.     .bbf_slide_lr_1 .slidebardown {
    
67.         right: 5px;
    
68.         top: 66px;
    
69.     }        
    
70.     .bbf_slide_lr_1 em {
    
71.             position: absolute;
    
72.             left: 3px;
    
73.             bottom: 0;
    
74.             height: 40px;
    
75.             text-indent: 5px;
    
76.             line-height: 40px;
    
77.             font-size: 16px;  
    
78.             color: #000;
    
79.             overflow: hidden;
    
80.             background-color: #fff;
    
81.             opacity: .4;filter:alpha(opacity=40);
    
82.     }
    
83.     .bbf_slide_lr_1 a:hover em {
    
84.             background-color: #000;
    
85.     }
    
86.     .bbf_slide_lr_1 li:hover em {
    
87.             color: #fff;
    
88.             text-decoration: none;
    
89.     }
    
90.     </style>
    
91. 
    
92.     <div class="slidebox bbf_slide_lr_1" slidenum="4" slidestep="3" >  <!--4个，每次滚动3个-->
    
93.     <a class="slidebarbtn leftbtn slidebarup" mevent="click" href="javascript:void(0);"> <</a>
    
94.     <div class="middle cl" >
    
95.             <ul class="slideshow">
    
96.             [loop]
    
97.             <li style="width: {picwidth}px;">
    
98.         <a href="{url}" {target} title="{title}"><img src="{pic}" width="{picwidth}px" height="{picheight}px" alt="{title}" /><em style="width: {picwidth}px;">{title}</em> </a>
    
99.         </li>
    
100.         [/loop]
     
101.         </ul>
     
102.     </div>
     
103.     <a class="slidebarbtn rightbtn slidebardown" mevent="click" href="javascript:void(0);">> </a>
     
104.     </div>
     
105. 
     
106.     <script type="text/javascript">
     
107.     runslideshow();
     
108.     </script>
     
109. 
     
110. <!--版本二-->
     
111. 
     
112. 图片列表：
     
113. 
     
114.     <style type="text/css">
     
115.     .bbf_slide_lr_1 {
     
116.             margin-bottom: 10px;
     
117.         padding: 5px 35px;
     
118.         position: relative;
     
119.         border: 1px solid #ccc;
     
120.         border-right: none;
     
121.         border-radius: 5px;
     
122.     }
     
123.     .bbf_slide_lr_1 li {
     
124.         float: left;
     
125.         overflow: hidden;
     
126.         padding: 0 3px;
     
127.         text-align: center;
     
128.     }
     
129.     .bbf_slide_lr_1 li a {
     
130.             display: block;
     
131.     }
     
132.     .bbf_slide_lr_1 .slidebarbtn {
     
133.         display: block;
     
134.         font-family: Geneva,sans-serif;
     
135.         font-size: 36px;
     
136.         height: 80px;
     
137.         line-height: 80px;
     
138.         position: absolute;
     
139.         text-align: center;
     
140.         width: 28px;
     
141.         background: none repeat scroll 0 0 #f2f2f2;
     
142.         border: 1px solid #cdcdcd;
     
143.         color: #333;
     
144.             border-radius: 5px;
     
145.     }
     
146.     .bbf_slide_lr_1 .slidebarbtn:hover {
     
147.         text-decoration: none;
     
148.     }
     
149.     .bbf_slide_lr_1 .slidebarbtn:hover {
     
150.         background: none repeat scroll 0 0 #fcc9a4;
     
151.         border: 1px solid #cdcdcd;
     
152.         color: #fff;
     
153.     }
     
154.     .bbf_slide_lr_1 .slidebarup {
     
155.         left: 5px;
     
156.         top: 66px;
     
157.     }
     
158.     .bbf_slide_lr_1 .slidebardown {
     
159.         right: 5px;
     
160.         top: 66px;
     
161.     }        
     
162.     .bbf_slide_lr_1 em {
     
163.             position: absolute;
     
164.             left: 3px;
     
165.             bottom: 0;
     
166.             height: 40px;
     
167.             text-indent: 5px;
     
168.             line-height: 40px;
     
169.             font-size: 16px;  
     
170.             color: #000;
     
171.             overflow: hidden;
     
172.             background-color: #fff;
     
173.             opacity: .4;filter:alpha(opacity=40);
     
174.     }
     
175.     .bbf_slide_lr_1 a:hover em {
     
176.             background-color: #000;
     
177.     }
     
178.     .bbf_slide_lr_1 li:hover em {
     
179.             color: #fff;
     
180.             text-decoration: none;
     
181.     }
     
182.     </style>
     
183. 
     
184.     <div class="slidebox bbf_slide_lr_1" slidenum="4" slidestep="3" >  <!--4个，每次滚动3个-->
     
185.     <a class="slidebarbtn leftbtn slidebarup" mevent="click" href="javascript:void(0);"> <</a>
     
186.     <div class="middle cl" >
     
187.             <ul class="slideshow">
     
188.             [loop]
     
189.             <li style="width: {picwidth}px;">
     
190.         <a href="{url}" {target} title="{title}"><img src="{pic}" width="{picwidth}px" height="{picheight}px" alt="{title}" /><em>{title}</em> </a>
     
191.         </li>
     
192.         [/loop]
     
193.             [order=1]
     
194.             <li style="width: {picwidth}px;">
     
195.             <style type="text/css">
     
196.             .slidebarup,.slidebardown {top:top:calc({picheight}px/2 - 35px);top:-moz-calc({picheight}px/2 - 35px);top:-webkit-calc({picheight}px/2 - 35px);}
     
197.             .bbf_slide_lr_1 em {width:{picwidth}px;}
     
198.             </style>
     
199.             <a href="{url}" {target} title="{title}"><img src="{pic}" width="{picwidth}px" height="{picheight}px" alt="{title}" /><em>{title}</em></a>
     
200.             </li>
     
201.             [/order]
     
202.         </ul>
     
203.     </div>
     
204.     <a class="slidebarbtn rightbtn slidebardown" mevent="click" href="javascript:void(0);">> </a>
     
205.     </div>
     
206. 
     
207.     <script type="text/javascript">
     
208.     runslideshow();
     
209.     </script>
     
210. 
     
211. 帖子列表（和版本一的一样）：

复制代码

5.你还可以根据我的代码进行调整修改，还可以另存为自定义模块模板。另外还可以将样式放在DZ默认模板样式表里边，这样更好一些

mandy~ 发表于 2018-2-5 17:17
https://discuz.dismall.com/thread-3650430-1-1.html

因该主题已不能回覆查看内容，以下是该主题的隐藏内容 ...

谢谢回复，我研究一下