dedecms网站首页全屏幻灯片如何制作，如何在不同分辨率下自动适应尺寸，应该注意一些什么细节？
打开网站首页模板index.htm，然后在body标签之间添加如下代码。
在index.htm调用的css文件common.css中增加幻灯片的样式。
/*Begin 幻灯片*/.slide{ width:100%; }.slide .banner{ width: 100%; position: relative; z-index: 50; overflow: hidden; height:405px; } .slide .banner .bd{ margin:0 auto; position:relative; z-index:0; overflow:hidden; } .slide .banner .bd ul{ width:100%; } .slide .banner .bd li{ width:100%; height:100%; overflow:hidden; text-align:center; } .slide .banner .bd li a img{ width:100%; height:100%; } .slide .banner .hd{ position: absolute; text-align: center; width: 100%; bottom: 20px; } .slide .banner .hd li{ display: inline-block; background: #fff; border-radius: 50%; margin: 0 12px; overflow: hidden; cursor:pointer; display:inline-block; *display:inline; zoom:1; width:11px; height:11px; background:url(../images/tg_flash_p.png) -24px 0; overflow:hidden; line-height:9999px; } .slide .banner .hd li.on{ background: #DABF72; color: #DABF72; } /*End 幻灯片*/
其中
.slide .banner{ width: 100%; position: relative; z-index: 50; overflow: hidden; height:405px; }
中的高度可以自定义，比如可以设置为350px等。
在页面中加载jquery.js文件以及jquery.SuperSlide.2.1.3.js文件，同时增加一个js文件jquery.web.js，如下图所示。
打开jquery.web.js文件，在文件中添加如下内容，这个内容功能为：在不同分辨率下自动调整幻灯片图片的比例，防止图片变形。
$(function(){ $bodyWidth=$("body").width(); $bili=0.25; $slideHeight=$bodyWidth*$bili; $(".slide .banner").css({ "height":$slideHeight+"px" });});
其中$bili=0.25;指的是幻灯片比例： $bili=（图片）高/宽；，这个数值是自主设置的。
到此为止，自动适应不同分辨率的幻灯片就做好了，效果如下。
标签：dedecms,全屏,幻灯片
