浙江 杭州

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

系统分类: 网页特效 - jquery插件 - jQuery选项卡/Tabs 2016-07-13

人气10184

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


这是一款效果非常酷的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});              
              

配置参数

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

参数 默认值 描述
auto true 是否自动播放
delay 4 轮播图切换的延迟时间,单位秒
duration 500 轮播图动画的持续时间,单位毫秒
effect 'fade' 过渡动画的效果,可选值有:"fade"和"slide"
event 'mouseover' 在Tabs上触发切换轮播图的事件
firstDelay null 自动播放是的延迟
index 1 要显示的图片的index
vertical false 使用垂直布局

Tabs的可用配置参数有:

属性 默认值 描述
auto false 是否自动播放
delay 4 Tabs切换的延迟时间,单位秒
event 'mouseover' 在Tabs上触发切换轮播图的事件
index 1 要显示的图片的index

查看演示
下载资源:0
下载资源
错误提交:

格式:zip 大小:1.01M

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1629.html 非特殊说明,本文版权归原作者所有,转载请注明出处
Tabs样式单页多图jQuery轮播图插件

我当前G币余额:0 已下载次数:0

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有3 评论)