这是一款效果非常酷的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 |
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!