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

一、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><!-- Tabs --><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;}@R_674_5179@@R_674_5179@  三、初始化插件new Tab('.J_tab',{auto:truE});new Slide('#slideBox',{index: 1,effect:'slide',firstDelay:8});       Keymob移动端广告平台是中国领先的移动广告、移动广告优化平台，为广告主和应用开发者提供最优的广告产品服务创造最佳收益。