新九宫格式幻灯片 大方漂亮 简单易用

新九宫格式幻灯片如下图：



第一步制作幻灯片：后台--》门户--》模块模板

点击 添加按扭 如下图所示



此处可以可以选择不同的模块分类如 附件类、帖子类、文章类、图片类等等 可以根据你的喜好选择不同的模块分类

下面我们以文章类为例来讲解，选择文章分类 点提交 如下图所示 ，为新建的模块起个名字 如 “百变幻灯片”  

把代码框里面的内容全部删除



接下来 我们输入代码

1. <style type="text/css">
   
2. .bignews {
   
3.         height: 350px;
   
4.         width: 960px;
   
5.         background-color: #666;
   
6. }
   
7. .picbox {
   
8.         clear: none;
   
9.         float: left;
   
10.         height: 350px;
    
11.         width: 660px;
    
12.         background-color: #666;
    
13. }
    
14. .bignews_btn {
    
15.         padding: 0px;
    
16.         clear: none;
    
17.         float: right;
    
18.         height: 340px;
    
19.         width: 300px;
    
20. }
    
21. .daiv {
    
22.         clear: none;
    
23.         float: left;
    
24.         height: 350px;
    
25.         width: 660px;
    
26.         background-color: #666;
    
27. }
    
28. .ddiv {
    
29.         float: left;
    
30.         height: 96px;
    
31.         width: 96px;
    
32. }
    
33. .slidebar img {
    
34.         margin-top: 5px;
    
35.         margin-left: 3px;
    
36. }
    
37. 
    
38. .slideshow span.title { position: absolute; bottom: 0; left: 0; margin-bottom: 50; width: 100%; height: 32px; line-height: 32px; font-size: 14px; text-indent: 10px; }
    
39. .slidebar li { float: left; margin-right: 1px; width: 95px; height: 95px; line-height: 95px; text-align: center; font-size: 10px; cursor: pointer; }
    
40. .slidebar li.on { background: rgba(255, 255, 255, 225); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr = #50FFFFFF,gradientType=0, endColorstr = #50FFFFFF); color: #000; font-weight: 700; }
    
41. </style>
    
42. <div class="bignews slidebox">
    
43.                     <ul class="picbox slideshow">
    
44.                         [loop]<li class="daiv"><img src="{pic}" width="{picwidth}" height="{picheight}" style="background-color:#666" /><span class="title">{title}</span> </li>
    
45.                         
    
46.                         [/loop]
    
47. </ul>
    
48. <div class="slidebar">
    
49.                         [loop1]
    
50.                                        
    
51.                         
    
52.     <img src="{pic}" width="95" height="95"  />
    
53.                           
    
54.                                         [/loop1]
    
55.                 </div>
    
56.             </div>
    
57. <script type="text/javascript">
    
58. runslideshow();
    
59. </script>

复制代码

此时我们就可以通过前台DIY调用了

:hug:

谢谢 楼主的分享

http://eoo.pw/

感谢分享！http://www.xinyang.la

谢谢分享  http://www.ukdaohang.com

卡半天没显示

什么情况

谢谢 楼主的分享

楼主,那大图显示失真的问题,能不能给一并解决了