【分享学习贴】图片滚动不一定要以插件来实现，模块样式也可以【已有演示】

演示地址：http://www.allinid.com       产品展示那里
PS：我只是提供了个方法，具体的细节调试还是要靠自己的。
顶级域名还没绑定。。。。下午再绑定。模板也是自己弄的，欢迎大家拍砖。

谢谢肥爷的金币。。。I LOVE 金币。。。。哈哈。。。。

登陆后台—门户—模块样式—添加—选择（附件、群组附件、相册、图片类）都可以；

填写样式名称：写一个好记的，例如：论坛图片附件向左滚动。

下面是主体代码：

1. <style type="text/css">
   
2. <!--
   
3. #demo {
   
4. background: #FFF;
   
5. overflow:hidden;
   
6. border: 0px;
   
7. width: 100%;
   
8. }
   
9. #demo img {
   
10. border: 3px solid #F2F2F2;
    
11. }
    
12. #indemo {
    
13. float: left;
    
14. width: 800%;
    
15. }
    
16. #demo1 {
    
17. float: left;
    
18. }
    
19. #demo2 {
    
20. float: left;
    
21. }
    
22. -->
    
23. </style>
    
24. <div id="demo">
    
25. <div id="indemo">
    
26. <div id="demo1">
    
27. 代码添加处
    
28. </div>
    
29. <div id="demo2"></div>
    
30. </div>
    
31. </div>
    
32. 
    
33. <script>
    
34. <!--
    
35. var speed=10; //数字越大速度越慢
    
36. var tab=document.getElementById("demo");
    
37. var tab1=document.getElementById("demo1");
    
38. var tab2=document.getElementById("demo2");
    
39. tab2.innerHTML=tab1.innerHTML;
    
40. function Marquee(){
    
41. if(tab2.offsetWidth-tab.scrollLeft<=0)
    
42. tab.scrollLeft-=tab1.offsetWidth
    
43. else{
    
44. tab.scrollLeft++;
    
45. }
    
46. }
    
47. var MyMar=setInterval(Marquee,speed);
    
48. tab.onmouseover=function() {clearInterval(MyMar)};
    
49. tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
    
50. -->
    
51. </script>

复制代码

请注意上面代码中的中文“代码添加处”
说明：上面这段代码是向左滚动的主体代码，中间“代码添加处”那里就是添加图片显示方式的代码。
那么，其他代码到哪里找？  更简单。
就在模块样式列表里找。
例如，我要显示附件图片的代码，直接在模块样式列表中找官方配来的代码“附件图片列表”，代码如下：

1. <div class="module cl ml">
   
2. <ul>
   
3. [loop]
   
4. <li style="width: {picwidth}px;">
   
5.         <a href="{threadurl}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" /></a>
   
6.         <p><a href="{threadurl}" title="{threadsubject}"{target}>{threadsubject}</a></p>
   
7. </li>
   
8. [/loop]
   
9. </ul>
   
10. </div>

复制代码

将这段代码加到第一段代码的“代码添加处”即可。。。。。

这个方法有个好处就是，图片的大小，显示方式等，都可以在首页的DIY处调整。。。。

其他图片的调用均可以参照此方法。。。。欢迎拍砖。。。。

我的站还在本机调试中，争取今天上传到空间，弄完了我上演示。。。。。

  支持分享   

呵呵，这个不错哦。

技术贴 留名

做个记号以后留着用

支持分享

登陆后台—门户—模块样式—添加—选择（附件、群组附件、相册、图片类）都可以；

填写样式名称：写一个 ...
mogi365 发表于 2010-5-26 08:54

比如我在模块样式的  相册分类 添加了 名字 向右滚动  

可是在首页diy  相册的时候没有 向右滚动  名字

支持分享
指间流沙 发表于 2010-5-26 08:56

好东西是需要支持的！！！

LZ的好东西～