HTML5 Add Tabs Style single page multi-graph Carousel Diagram Plugin Tutorial

First, the HTML structure
<div id= "Slidebox" >
<div class= "J_slide" >
<!--Carousel--
<div class= "J_slide_clip" >
<ul class= "J_slide_list" >
<li class= "J_slide_item" >
<a href= "javascript:" >
</a>
<div class= "J_slide_advance" >
<p><a href= "#" ></a></p>
<p><a href= "#" ></a></p>
<p style= "margin-right:0;" >
<a href= "#" ></a>
</p>
</div>
</li>
</ul>
</div>
<!--Tabs--
<ul class= "J_slide_trigger" >
<li class= "" ><a href= "javascript:" >......</a></li>
</ul>
</div>
</div>

Second, 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", "Microsoft Jas Black";
}

#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;
}

Third, initialize the plug-in
New Tab ('. J_tab ', {auto:true});
New Slide (' #slideBox ', {index:1, Effect: ' Slide ', firstdelay:8});

Keymob Mobile advertising platform is China's leading mobile advertising, mobile advertising optimization platform for advertisers and application developers to provide the best advertising products and services to create optimal revenue.

HTML5 Add Tabs Style single page multi-graph Carousel Diagram Plugin Tutorial