Tabs样式单页多图jQuery轮播图插件

这是一款效果非常酷的Tabs样式单页多图jQuery轮播图插件。该轮播图插件在每个Tab中可以放置多幅图片，每幅图片都可以链接到不同的页面中。该轮播图整体效果时尚大方，使用起来也非常简单。

使用方法

HTML结构

该Tabs样式轮播图的HTML结构分为2个部分：轮播图部分使用的是一个无序列表。在每一个列表项中，顶部的大图直接使用一个<a>标签来包裹一张图片，而下面的三张小图则是包裹在一个<div>元素中，每张小图同样使用<a>标签来包裹图片。

另一个部分的Tabs部分，它同样使用无序列表来制作。

<div id="slideBox">
  <div class="J_slide">
    <!-- 轮播图 -->
    <div class="J_slide_clip">
      <ul class="J_slide_list">
        <li class="J_slide_item"> 
          <a href="javascript:">
            <img src="images/1.jpg" height="329" width="600">
          </a>
          <div class="J_slide_advance">
            <p><a href="#"><img src="images/2.jpg" /></a></p>
            <p><a href="#"><img src="images/3.jpg" /></a></p>
            <p style="margin-right:0;">
            <a href="#"><img src="images/4.jpg" alt="......"></a>
            </p>
          </div>
        </li>
        ......
      </ul>
    </div>
    <!-- Tabs -->
    <ul class="J_slide_trigger">
      <li class=""><a href="javascript:">......</a></li>
      ......
    </ul>
  </div>
</div>             
              

CSS样式

需要为该Tabs样式轮播图添加下面的一些必要的CSS样式：

@charset utf-8;
* {
  margin:0;
  padding:0;
}
body {
  text-align:left;
  font-size:12px;
}
ul, li {
  list-style:none;
}
img {
  border:none;
}
a {
  text-decoration:none;
}
.zhuanti_box {
  width:600px;
  height:auto;
  margin:20px auto;
  padding:7px;
  border:1px solid #eae9ef;
}
#slideBox {
  width:600px;
  overflow:hidden;
}
#slideBox .J_slide_list {
  width:3600px;
}
#slideBox .J_slide_list .J_slide_item {
  width:600px;
  height:478px;
  float:left;
}
#slideBox .J_slide_list .J_slide_item img {
  vertical-align:top;
}
#slideBox .J_slide_trigger {
  width:600px;
  height:32px;
  background:#5a5a5a;
  margin-top:1px;
}
#slideBox .J_slide_trigger li, .J_slide_trigger a {
  width:100px;
}
#slideBox .J_slide_trigger li {
  float:left;
  height:32px;
  line-height:32px;
  text-align:center;
  _display:inline;
  overflow:hidden;
}
#slideBox .J_slide_trigger li a {
  display:block;
  height:32px;
  color:#fff;
  font-family:"Microsoft Yahei", "微软雅黑";
}
#slideBox .J_slide_trigger li.cur a, .J_slide_trigger li a:hover {
  color:#FFF;
  background:#21b6bb;
  text-decoration:none;
}
.J_slide_advance {
  width:600px;
  float:left;
  height:148px;
  margin-top:1px;
}
.J_slide_advance p {
  width:199px;
  margin-right:1px;
  float:left;
}                
              

初始化插件

该Tabs样式轮播图的初始化也分为2个部分，一个是轮播图的初始化，一个是Tabs的初始化：

new Tab('.J_tab',{auto:true});
new Slide('#slideBox',{index: 1 ,effect:'slide', firstDelay:8});              
              

配置参数

轮播图的可用配置参数有：

Tabs的可用配置参数有：