页面的head部分，需引入必要的样式文件、jQuery库和轮播插件，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.superslide.js"></script>

页面的body部分，一个div容器里面放入了两个ul无序列表，分别是图片列表和对应的标题列表，代码如下：

<div class="m-slide" style="margin:30px auto">
  <ul class="img" style="position: relative; width: 490px; height: 200px;">
    <li style="position: absolute; width: 490px; left: 0px; top: 0px; display: list-item;"> <a href="#" target="_blank"><img src="images/a1.png"></a></li>
    <li style="position: absolute; width: 490px; left: 0px; top: 0px; display: none;"> <a href="#" target="_blank"><img src="images/a2.png"></a></li>
    <li style="position: absolute; width: 490px; left: 0px; top: 0px; display: none;"> <a href="#" target="_blank"><img src="images/a3.png"></a></li>
    <li style="position: absolute; width: 490px; left: 0px; top: 0px; display: none;"> <a href="#" target="_blank"><img src="images/a4.png"></a></li>
  </ul>
  <ul class="tab">
    <li class="  on"><a href="#"><b></b> <span class="title">海底世界</span></a> </li>
    <li><a href="#"><b></b><span class="title">山间风光</span></a></li>
    <li class=" "><a href="#"><b></b><span class="title">海边美景</span></a></li>
    <li class=" "><a href="#"><b></b><span class="title">秋日落叶</span></a></li>
  </ul>
</div>

页面的底部，启用轮播插件并设置好相应的参数，代码如下：

<script type="text/javascript">
  jQuery(".m-slide").slide({ titCell:".tab li", mainCell:".img",effect:"fold", autoPlay:true});
</script>