聚焦图素材和安装教程

{:soso__10959638132436384640_1:}经过几天的折腾终于脱离了主机屋的困扰，今天把聚焦图的全部代码和安装贡献给大家！

1. 
   
2. 首先大家下载好文件把里面的JS、CSS、IMG都长传去自己的论坛目录
   
3. 然后把下面这段代码放进门户-模块管理-数据调用（新建一个所属页面是：页面名称、模块分类是：帖子模块。建好后按属性-模块模板-复制代码进去）
   
4. <script src="js/jquery-1.4.4.min.js"></script>
   
5. <script src="js/slides.min.jquery.js"></script>
   
6. <script>
   
7.   $(function(){
   
8.    $('#slides').slides({
   
9.     preload: true,
   
10.     preloadImage: 'img/loading.gif',
    
11.     play: 5000,
    
12.     pause: 2500,
    
13.     hoverPause: true,
    
14.     animationStart: function(){
    
15.      $('.caption').animate({
    
16.       bottom:-35
    
17.      },100);
    
18.     },
    
19.     animationComplete: function(current){
    
20.      $('.caption').animate({
    
21.       bottom:0
    
22.      },200);
    
23.      if (window.console && console.log) {
    
24.       // example return of current slide number
    
25.       console.log(current);
    
26.      };
    
27.     }
    
28.    });
    
29.   });
    
30. </script>
    
31. 
    
32. <link rel="stylesheet" href="css/global.css">
    
33. <div id="container">
    
34.    <div id="example">
    
35.    <img src="img/new-ribbon.png" width="112" height="112" alt="New Ribbon" id="ribbon">
    
36.    <div id="slides">
    
37.     <div class="slides_container">
    
38.     [loop]
    
39.      <div>
    
40.       <a href="{url}" title="{title}" target="_blank"><img src="{pic}" width="570" height="270" alt="{title}"></a>
    
41.       <div class="caption" style="bottom:0">
    
42.       <p>{title}</p>
    
43.       </div>
    
44.      </div>
    
45.      [/loop]
    
46.      </div>
    
47.     <a href="#" class="prev"><img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
    
48.     <a href="#" class="next"><img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>   </div>
    
49.      <img src="img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">  </div>
    
50.   </div>
    
51. 接着就是数据调用了，按下内部调用。然后把那代码复制，在你想插入聚焦图的地方加入代码即可
    

复制代码

好了，就是这么简单。视频我会在这段时间弄个，因为本人比较懒{:soso__11355668017513440589_1:}

素材在https://discuz.dismall.com/thread-2289060-1-1.html这个帖子里面不想浪费金币就移步下本人站里

如果还不会请大家去我哪里看吧。因为附件太大没办法在这里上传（改好CSS的）
http://www.lingjx.com/forum.php?mod=viewthread&tid=16&page=1&extra=#pid22

自己留给位置

没人，只能自己顶

不能沉

时尚社区www.43sq.com友情支持

不错，一会试试效果。

支持一个，不错哟、

支持一个哦呵呵

非洲站长 发表于 2011-8-4 20:47
自己留给位置

会FALSH+XML幻灯片调用吗？希望LZ能够提供这方面的教材！