SuperSlide插件轮播图

(前途需要引入插件所需js)

<script type="text/javascript" src="js/jquery1.42.min.js"></script>
    <script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>

html

  <!--轮播图开始-->                    
                                           <div class="focusBox">
                                                <ul class="pic">
                                                    <li style="display: list-item;"><a href="http://www.SuperSlide2.com" target="_blank"><img src="${prefix('images/dww.jpg')}"></a></li>
                                                    <li style="display: none;"><a href="http://www.SuperSlide2.com" target="_blank"><img src="${prefix('images/dww.jpg')}"></a></li>
                                                    <li style="display: none;"><a href="http://www.SuperSlide2.com" target="_blank"><img src="${prefix('images/dww.jpg')}"></a></li>
                                                  <li style="display: none;"><a href="http://www.SuperSlide2.com" target="_blank"><img src="${prefix('images/dww.jpg')}"></a></li>
                                                  <li style="display: none;"><a href="http://www.SuperSlide2.com" target="_blank"><img src="${prefix('images/dww.jpg')}"></a></li>
                                                </ul>
                                                <div class="txt-bg"></div>
                                                <div class="txt">
                                                    <ul>
                                                        <li><a href="#">111111111111</a></li>
                                                        <li><a href="#">222222222222</a></li>
                                                        <li><a href="#">333333333333</a></li>
                                                      <li><a href="#">333333333333</a></li>
                                                      <li><a href="#">333333333333</a></li>
                                                    </ul>
                                                </div>
                                                <ul class="num">
                                                    <li ><a>1</a><span></span></li>
                                                    <li ><a>2</a><span></span></li>
                                                    <li ><a>3</a><span></span></li>
                                                  <li ><a>4</a><span></span></li>
                                                  <li ><a>5</a><span></span></li>
                                                </ul>
                                            </div>
                                            <script type="text/javascript">
                                                jQuery(".focusBox").slide({
                                                    titCell: ".num li",
                                                    mainCell: ".pic",
                                                    effect: "fold",
                                                    autoPlay: true,
                                                    trigger: "mouseover",
                                                    startFun: function (i) {
                                                        jQuery(".focusBox .txt li").eq(i).animate({"bottom": 0}).siblings().animate({"bottom": -36});
                                                    }
                                                });
                                            </script>
                     					 <!--轮播图结束-->

/*轮播图*/
.focusBox{position: relative;width: 435px;height: 250px;/*当页面加载完之后，不会出现混乱的现香*/overflow: hidden;}
/*遮罩*/
.focusBox .txt-bg{position: absolute; bottom: 0;
  z-index: 1;height: 36px; width: 100%;background:url(../images/btm.png) no-repeat center;opacity: 0.4;overflow: hidden;}
/*标题*/
.focusBox .txt { position: absolute; bottom: 0; z-index: 2; height: 36px; width:100%; overflow: hidden; }
.focusBox .txt li{ height:36px; line-height:36px; position:absolute; bottom:-36px;}
.focusBox .txt li a{ display: block; color: white; padding: 0 0 0 10px; font-size: 16px; font-weight: bold;
  text-decoration: none; }
/*小按钮*/
.focusBox .num { position: absolute; z-index: 3; bottom: 8px; right: 8px; }

.focusBox .num li{ float: left; position: relative; width:20px;height:20px;  overflow: hidden; 
  text-align: center; margin-right: 1px; cursor: pointer;}
.focusBox .num li a{ position: absolute; 
  z-index: 2; display: block; color: white; font-size:0;width: 100%; height: 100%; 
  top: 0; left: 0; text-decoration: none;background:url(../images/bai.png) no-repeat center }
.focusBox .num li span { display:none }
.focusBox .num li.on a{ background:url(../images/lan.png) no-repeat center }

效果图

4.所需材料（半透明图片、白色圆点和蓝色圆点）