Html5添加Tabs样式单页多图轮播图插件教程

最新推荐文章于 2024-05-28 19:26:08 发布

Angel19951012

最新推荐文章于 2024-05-28 19:26:08 发布

阅读量709

点赞数

本文链接：https://blog.youkuaiyun.com/Angel19951012/article/details/50470905

版权

这篇教程介绍了如何使用HTML5创建一个Tabs风格的单页多图轮播图。内容包括HTML结构的构建，CSS样式的设计以及初始化轮播图插件的代码。通过设置不同的CSS样式和JavaScript插件参数，实现了图片轮播和Tab切换的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、HTML结构
<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>

<ul class="J_slide_trigger">
<li class=""><a href="javascript:">......</a></li>
</ul>
</div>
</div>

二、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;
}

三、初始化插件
new Tab('.J_tab',{auto:true});
new Slide('#slideBox',{index: 1 ,effect:'slide', firstDelay:8});

KeyMob移动端广告平台是中国领先的移动广告、移动广告优化平台，为广告主和应用开发者提供最优的广告产品服务创造最佳收益。