迪恩网络 图片列表切换滚动

admin

这个根目录下的所有文件传到你的服务器论坛根目录下吧



然后属性里面DIY的宽度设置为222 高度为140

1. <style type="text/css">
   
2. /*优秀设计师*/
   
3. .deanmxstar{ width:1160px; margin:100px auto;  position:relative; z-index:1;}
   
4. .deanmxsc{ margin-top:20px;}
   
5. .deanmxstar .hd{ }
   
6. .deanmxstar .hd .next{ position:absolute; left:-20px; font-size:30px; top:100px; color:#a9a9a9; cursor:pointer;}
   
7. .deanmxstar .hd .prev{ position:absolute; right:-20px; font-size:30px; top:100px; color:#a9a9a9; cursor:pointer;}
   
8. .deanmxstar .hd .next:hover,.deanmxstar .hd .prev:hover{ color:#00c091;}
   
9.         .deanmxsc ul{}
   
10.                 .deanmxsc ul li{ width: 224px; height: 180px; margin-right: 10px; float: left;}
    
11.                         .deanmxscimg{ width:222px; height:140px; overflow:hidden; border:1px solid #e6e6e6;}
    
12.                         .deanmxscname{ height:40px; line-height:20px; height:40px; overflow:hidden; font-size:14px;}
    
13.                                 .deanmxscname a{ color:#333; font-size:14px;}
    
14.                                 .deanmxscname a:hover{ text-decoration:underline; color:#00c091;}
    
15.                        
    
16. 
    
17. </style>
    
18. <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    
19. <script type="text/javascript" src="jquery.SuperSlide.2.1.1.js"></script>
    
20. <link href="font-awesome.min.css" type="text/css" rel="stylesheet" />
    
21. <script type="text/javascript">
    
22.         var jq=jQuery.noConflict();
    
23. </script>
    
24. <div class="deanmxstar">
    
25.         <div class="hd"><a class="next icon-chevron-left"></a><a class="prev icon-chevron-right"></a></div>
    
26.         <div class="deanmxsc">
    
27.             <div class="tempWrap">
    
28.             <ul>
    
29.                     [loop]
    
30.                 <li>
    
31.                     <div class="deanmxscimg"><a href="{url}" target="_blank"><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" title="{title}" /></a></div>
    
32.                     <div class="clear"></div>
    
33.                     <div class="deanmxscname"><a href="{url}" target="_blank">{title}</a></div>
    
34.                 </li>
    
35.                 [/loop]
    
36.             </ul>
    
37.         </div>
    
38.         </div>   
    
39. </div>       
    
40. <script type="text/javascript">
    
41.         jQuery(".deanmxstar").slide({titCell:".hd ul",mainCell:".deanmxsc ul",autoPage:true,effect:"left",autoPlay:true,vis:5});
    
42. </script>

复制代码