带右侧标题选项卡的jQuery纵向图片轮播特效

一款带右侧标题选项卡的jQuery纵向图片轮播特效，可以自动轮播多张图片，也可以点击右侧的标题选项卡来切换图片，标题可以自定义（不建议太多的文字），图片也可以随意更换，喜欢的童鞋请收下吧。

分类：图片代码 > 图片轮播难易：初级

查看演示下载资源下载积分： 20 积分

页面的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>