dedecms网站首页全屏幻灯片如何制作？

1、打开网站首页模板index.htm，然后在body标签之间添加如下代码。

<div class="slide">

 

      <div class="banner">

 

          <div class="bd">

 

              <ul>

 

                <li><a href="/" title="幻灯片图片"><img src="/skin/images/slide.jpg" alt="幻灯片图片"/></a></li>

                <li><a href="/" title="幻灯片图片"><img src="/skin/images/slide.jpg" alt="幻灯片图片"/></a></li>

                <li><a href="/" title="幻灯片图片"><img src="/skin/images/slide.jpg" alt="幻灯片图片"/></a></li>

              </ul>

 

          </div>

 

          <div class="hd">

 

              <ul>

 

              </ul>

 

          </div>

 

      </div>

 

  <script>

 

          jQuery(".banner").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:"left",autoPlay:true,vis:1});

 

      </script>

 

  </div>

2、在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等。

3、在页面中加载jquery.js文件以及jquery.SuperSlide.2.1.3.js文件，同时增加一个js文件jquery.web.js，如下图所示。

4、打开jquery.web.js文件，在文件中添加如下内容，这个内容功能为：在不同分辨率下自动调整幻灯片图片的比例，防止图片变形。

$(function(){

 

   $bodyWidth=$("body").width();

 

   $bili=0.25;

 

   $slideHeight=$bodyWidth*$bili;

 

   $(".slide .banner").css({

 

       "height":$slideHeight+"px"

 

   });

 

});

其中$bili=0.25;指的是幻灯片比例： $bili=（图片）高/宽；，这个数值是自主设置的。

5、到此为止，自动适应不同分辨率的幻灯片就做好了，效果如下。