1、新建html文档。
2、准备好需要用到的图标。
3、书写hmtl代艨位雅剖码。<div class="slideGroup" styl髫潋啜缅e=""> <!--tab导航开始--> <!--tab导航结束--> <!--轮播主体内容开始--> <div class="parBd"> <div class="slideBox"> <a class="sPrev" href="#"></a> <ul> <li> <div class="pic"> <a href="#" target="_blank"><img src="img/datouwang1.png" /></a> </div> <div class="description"> <h4>产品1.1</h4> <p>品名：11111</p> <p>规格：36.25KG/支</p> <p>原料：222</p> <p><a href="#">更多</a></p> </div> </li> <li> <div class="pic"> <a href="#" target="_blank"><img src="img/datouwang2.png" /></a> </div> <div class="description"> <h4>产品1.2</h4> <p>品名：1111</p> <p>规格：36.25KG/支</p> <p>原料：2222</p> <p><a href="#">更多</a></p> </div> </li> </ul> <a class="sNext" href="#"></a> </div> <!-- tab1内容结束 --> <div class="slideBox"> <a class="sPrev" href="#"></a> <ul> <li> <div class="pic"> <a href="#" target="_blank"><img src="img/datouwang3.png" /></a> </div> <div class="description"> <h4>产品2.1</h4> <p>品名：1111</p> <p>规格：36.25KG/支</p> <p>原料：222</p> <p><a href="#">更多</a></p> </div> </li> <li> <div class="pic"> <a href="#" target="_blank"><img src="img/datouwang4.png" /></a> </div> <div class="description"> <h4>产品2.2</h4> <p>品名：1111</p> <p>规格：36.25KG/支</p> <p>原料：222</p> <p><a href="#">更多</a></p> </div> </li> </ul> <a class="sNext" href="#"></a> </div> <!-- tab2内容结束 --> <div class="slideBox"> <a class="sPrev" href="#"></a> <ul> <li> <div class="pic"> <a href="#" target="_blank"><img src="img/datouwang5.png" /></a> </div> <div class="description"> <h4>产品3.1</h4> <p>品名：1111</p> <p>规格：36.25KG/支</p> <p>原料：222</p> <p><a href="#">更多</a></p> </div> </li> <li> <div class="pic"> <a href="#" target="_blank"><img src="img/datouwang6.png" /></a> </div> <div class="description"> <h4>产品3.2</h4> <p>品名：1111</p> <p>规格：36.25KG/支</p> <p>原料：222</p> <p><a href="#">更多</a></p> </div> </li> </ul> <a class="sNext" href="#"></a> </div> <!-- tab3内容结束 --> <div class="slideBox"> <a class="sPrev" href="#"></a> <ul> <li> <div class="pic"> <a href="#" target="_blank"><img src="img/datouwang7.png" /></a> </div> <div class="description"> <h4>产品4.1</h4> <p>品名：站长素材</p> <p>规格：36.25KG/支</p> <p>原料：222</p> <p><a href="#">更多</a></p> </div> </li> <li> <div class="pic"> <a href="#" target="_blank"><img src="img/datouwang8.png" /></a> </div> <div class="description"> <h4>产品4.2</h4> <p>品名：1111</p> <p>规格：36.25KG/支</p> <p>原料：222</p> <p><a href="#">更多</a></p> </div> </li> </ul> <a class="sNext" href="#"></a> </div> <!-- tab4内容结束 --> </div> <!-- 主体内轮播结束 --></div>
4、书写css代码。.slideGroup { margin: 0 auto; width: 1000px稆糨孝汶; height: 500px; }.slideGroup .parHd { position: relative; height: 100px; line-height: 100px; padding: 0 20px; }.slideGroup .parHd ul { display: table; margin: 0 auto; }.slideGroup .parHd ul li { float: left; padding: 0 15px; cursor: pointer; }.slideGroup .parHd ul li.on { height: 30px; background: #fff; color: green; }.slideGroup .slideBox { overflow: hidden; zoom: 1; padding: 10px 0 10px 100px; position: relative; }.slideGroup .sPrev, .slideGroup .sNext { position: absolute; left: 5px; top: 10px; display: block; width: 54px; height: 385px; background: url(../img/icoLeft.png) center center no-repeat; }.slideGroup .sNext { left: auto; right: 5px; background: url(../img/icoRight.png) center center no-repeat; }.slideGroup .parBd ul { overflow: hidden; zoom: 1; }.slideGroup .parBd ul li { margin: 0 8px; float: left; width: 800px; position: relative; }.slideGroup .parBd ul li .pic { text-align: center; }.slideGroup .parBd ul li .pic img { width: 450px; height: 385px; display: block; padding: 2px; }.slideGroup .parBd ul li .description { position: absolute; width: 280px; height: 145px; background: #372d2b; padding: 20px 10px 10px 20px; top: 120px; left: 420px; color: #fff }.slideGroup .parBd ul li .description h4 { color: #cca552; height: 40px; line-height: 40px; }.slideGroup .parBd ul li .description a { color: #fff; float: right; margin-top: 10px; background: #7c0002; border-radius: 5px; padding: 3px 10px; }
5、书写并添加js代码。<script src="js/jquery.min.js"></script><script src="js/jquery.SuperSlide.2.1.1.js"></script><script> /* 内层图片滚动切换 */ jQuery(".slideGroup .slideBox").slide({ mainCell: "ul", vis: 1, prevCell: ".sPrev", nextCell: ".sNext", effect: "leftLoop" }); /* 外层tab切换 */ jQuery(".slideGroup").slide({ titCell: ".parHd li", mainCell: ".parBd", trigger: "click" });</script>
6、代码整体结构。
7、查看效果。
