页面的head部分，需引入页面所需的样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="less/reset.css">
<link type="text/css" rel="stylesheet" href="less/slide.css">
<link type="text/css" rel="stylesheet" href="less/index.css">

页面的body部分，主要是在header标签里面放入两个ul无序列表来显示轮播图片内容，代码如下：

<header>
    <div class="banner">
        <div id="slide2d" class="slide-carousel slide-2d">
            <ul  class="item-list clearfix">
                <li class="item0">
                    <div class="item-content">
                        <a href="javascript:void(0);">
                            <img class="cover-img" src="image/banner1.jpg" alt="">
                        </a>
                    </div>
                </li>
<!-- 省略部分演示代码 -->        
            </ul>
            <!--indicators-->
            <div class="indicator-list">
                <a href="javascript:void(0);" data-slide-index="0" class="selected"></a>
                <a href="javascript:void(0);" data-slide-index="1"></a>
                <a href="javascript:void(0);" data-slide-index="2"></a>
                <a href="javascript:void(0);" data-slide-index="3"></a>
                <a href="javascript:void(0);" data-slide-index="4"></a>
                <a href="javascript:void(0);" data-slide-index="5"></a>
                <a href="javascript:void(0);" data-slide-index="6"></a>
            </div>
            <!--controls-->
            <div class="controls">
                <a  class="item-prev glyphicon glyphicon-menu-left" href="javascript:void(0);"></a>
                <a  class="item-next glyphicon glyphicon-menu-right" href="javascript:void(0);"></a>
            </div>
            <!--desc-->
            <div class="desc">
                <a href=""><strong id="sliderDesc1"></strong></a>
            </div>
        </div>
        <div id="slide3d" class="slide-carousel slide-3d">
            <ul  class="item-list clearfix">
                <li class="item0">
                    <div class="item-content">
                        <a href="javascript:void(0);">
                            <img class="cover-img" src="image/banner1.jpg" alt="">
                        </a>
                    </div>
                </li>
<!-- 省略部分演示代码 -->
            </ul>
            <!--indicators-->
            <div class="indicator-list">
                <a href="javascript:void(0);" data-slide-index="0" class="selected"></a>
                <a href="javascript:void(0);" data-slide-index="1"></a>
                <a href="javascript:void(0);" data-slide-index="2"></a>
                <a href="javascript:void(0);" data-slide-index="3"></a>
                <a href="javascript:void(0);" data-slide-index="4"></a>
                <a href="javascript:void(0);" data-slide-index="5"></a>
                <a href="javascript:void(0);" data-slide-index="6"></a>  
            </div>
            <!--controls-->
            <div class="controls">
                <a  class="item-prev glyphicon glyphicon-menu-left" href="javascript:void(0);"></a>
                <a  class="item-next glyphicon glyphicon-menu-right" href="javascript:void(0);"></a>
            </div>
        </div>
    </div>
</header>
<main></main>
<footer></footer>

页面的底部，需引入jQuery库和轮播插件，对指定元素启用插件并设置好相应参数，代码如下：

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/slide.min.js"></script>
<script type="text/javascript">
$(function(){
    //3d
    $('#slide3d').slideCarsousel({slideType:'3d',indicatorEvent:'mouseover'});
    //2d
    var  sliderDescArr=[],i=0,len=10;
    for(;i<len;i++){
        sliderDescArr.push(new Array(10).join(''+i));
    }
    $('#sliderDesc').text(sliderDescArr[0]);
    $('#slide2d').slideCarsousel({callbackFunc:function(index){
        $('#sliderDesc1').text(sliderDescArr[index]);
    }});
});
</script>