tab选项卡切换不同图片代码

1、新建html文档。

2、准备好需要用到的图标。

3、书写hmtl代码。

<div class="slideGroup" style="">

<!--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>

品名：11111

规格：36.25KG/支

原料：222

<a href="#">更多</a>

</div>

</li>

<li>

<div class="pic">

<a href="#" target="_blank"><img src="img/datouwang2.png" /></a>

</div>

<div class="description">

<h4>产品1.2</h4>

品名：1111

规格：36.25KG/支

原料：2222

<a href="#">更多</a>

</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>

品名：1111

规格：36.25KG/支

原料：222

<a href="#">更多</a>

</div>

</li>

<li>

<div class="pic">

<a href="#" target="_blank"><img src="img/datouwang4.png" /></a>

</div>

<div class="description">

<h4>产品2.2</h4>

品名：1111

规格：36.25KG/支

原料：222

<a href="#">更多</a>

</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>

品名：1111

规格：36.25KG/支

原料：222

<a href="#">更多</a>

</div>

</li>

<li>

<div class="pic">

<a href="#" target="_blank"><img src="img/datouwang6.png" /></a>

</div>

<div class="description">

<h4>产品3.2</h4>

品名：1111

规格：36.25KG/支

原料：222

<a href="#">更多</a>

</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>

品名：站长素材

规格：36.25KG/支

原料：222

<a href="#">更多</a>

</div>

</li>

<li>

<div class="pic">

<a href="#" target="_blank"><img src="img/datouwang8.png" /></a>

</div>

<div class="description">

<h4>产品4.2</h4>

品名：1111

规格：36.25KG/支

原料：222

<a href="#">更多</a>

</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、查看效果。