发布一个今年大站最常用的特效DIY幻灯片

DIY实现代码：

1. <div class="slide-player slidebox">
   
2. <ul class="slideshow">
   
3. [loop]
   
4. <li class="slide-item" style="width: {picwidth}px; height: {picheight}px;"><a href="{url}" title="{title}" {target}><img src="{pic}" width="{picwidth}" height="{picheight}"  alt="{title}"/></a></li>
   
5. [/loop]
   
6. </ul>
   
7. <div class="slide-page slidebar">
   
8. [loop1]
   
9. <a href="javascript:;">{currentorder}</a>
   
10. [/loop1]
    
11. </div>
    
12. </div>
    
13. <script type="text/javascript">
    
14. runslideshow();
    
15. </script>
    

复制代码

CSS：

1. .slide-player { position:relative; overflow:hidden; width:292px; height:219px; }
   
2. .cnt-sub .slide-player span { height:50px; font:20px/50px "microsoft yahei"; }
   
3. .slide-player .slide-item { position:absolute; top:0; left:0; width:100%; height:100%; }
   
4. .slide-item a, .slide-item a:visited { display:block; width:100%; height:100%; color:#FFF; }
   
5. .slide-item a:hover { color:#FFF; text-decoration:none; }
   
6. .slide-item img { width:100%; height:100%; }
   
7. .slide-page { position:absolute; right:0; bottom:3px; }
   
8. .slide-item span { position:absolute; left:0; bottom:0; display:block; width:100%; height:21px; text-indent:5px; line-height:21px; filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#66000000',endColorstr='#66000000'); background:rgba(0,0,0,0.4); overflow:hidden; }
   
9. .slide-player .slide-page a, .slide-player .slide-page a:visited { float:left; margin-right:5px; padding-top:13px; width:13px; height:0; text-align:center; font:700 12px/15px Simsun; background:#FFF; border-radius:6px; box-shadow:inset 1px 1px 2px rgba(0,0,0,.4); overflow:hidden; }
   
10. .slide-player .slide-page .on, .slide-player .slide-page .on:visited { text-decoration:none; color:#FFF; background:#f14708; }
    

复制代码

演示网站：www.aibai123.com
有上百款的幻灯片特效显示

这只是其中一个 ，DIY  模版制作可以联系我

很不错的说。