基于SuperSlide的上下切换的轮播图插件

本图文轮播插件是基于强大的jQuery SuperSlide轮播插件实现的图文上下轮播切换效果。兼容性自不必说。主要是设计比较新颖，有点橱窗的效果。css的样式可以自己进行调整，图片如果要增加，需要手动修改上面的计数器的数字。 1、引入css

<link href="css/5imoban.css" rel="stylesheet" />

2、加入html

<div class="activityBox" style="margin:30px auto">
  <div class="title">
    <h2>静态网页模板</h2>
    <span class="ac_List"><a href="#">全部</a><span class="pageState"><span>1</span>/5</span></span><span class="prev"></span><span class="next"></span>
  </div>
  <div class="content">
    <span class="leftZone"></span>
    <div class="contentInner">
      <div class="tempWrap" style="overflow:hidden; position:relative; height:240px">
        <ul style="position: relative; padding: 0px; margin: 0px; top: 0px;">
          <li style="height: 240px;"><a href="#" target="_blank"><img src="images/1.jpg"></a>
            <p class="mt5"><a href="#">英雄OR枭雄</a></p>
            <p>截止日期：12月10日<span>246人关注</span></p>
          </li>
          <li style="height: 240px;"><a href="#" target="_blank"><img src="images/2.jpg"></a>
            <p class="mt5"><a href="#">表白：那些没有好好说的再见</a></p>
            <p>截止日期：12月12日<span>1001人关注</span></p>
          </li>
          <li style="height: 240px;"><a href="#" target="_blank"><img src="images/3.jpg"></a>
            <p class="mt5"><a href="#">王的盛宴</a></p>
            <p>截止日期：12月04日<span>797人关注</span></p>
          </li>
          <li style="height: 240px;"><a href="#" target="_blank"><img src="images/4.jpg"></a>
            <p class="mt5"><a href="#">特价票</a></p>
            <p>截止日期：12月27日<span>892人关注</span></p>
          </li>
          <li style="height: 240px;"><a href="#" target="_blank"><img src="images/5.jpg"></a>
            <p class="mt5"><a href="#">少年派的奇幻漂流</a></p>
            <p>截止日期：12月07日<span>1591人关注</span></p>
          </li>
        </ul>
      </div>
    </div>
    <span class="rightZone"></span>
  </div>
</div>

3、引入jQuery库和SuperSlide插件

<script src="http://www.5imoban.net/download/jquery/jquery.1.11.3.js"></script>
<script src="http://www.5imoban.net/download/SuperSlide/SuperSlide.2.1.3.js"></script>

4、调用插件

jQuery(".activityBox").slide({
    mainCell:".contentInner ul",
    effect:"top",
    delayTime:400
});