选项卡+轮播的实现

html:

<!--main4-->
<div class="z_main4">
    <div class="container">
        <div class="tabbox" id="tabbox">
            <ul class="nav-list">
                <li mid="0" class="nav-0 nav-cus-0"><span><a href="javascript:void(0)">标准专业版音乐放松椅</a></span></li>
                <li mid="1" class="nav-1"><span><a href="javascript:void(0)">初级专业版音乐放松椅</a></span></li>
                <li mid="2" class="nav-2"><span><a href="javascript:void(0)">基础专业版音乐放松椅</a></span></li>
                <li mid="3" class="nav-3"><span><a href="javascript:void(0)">功能对比</a></span></li>
            </ul>
            <div class="contant">
                <div class="inner" style="margin-left: 0px;">
                    <div class="contant-con con_list" mid="0" >
                        <table width="1200px" height="550" bordercolor="#b2b2b2" cellpadding="0" cellspacing="0" border="1" style="border-collapse:collapse;text-align: center;">
                            <tr>
                                <td style="font-size:18px;font-weight:bold;">型号</td>
                                <td>BR/FS-03</td>
                                <td rowspan="6">
                                    <p style="font-size:18px;font-weight:bold;">音乐放松椅 <br/>
                                        （按摩型）</p>
                                    <div>
                                    <img src="./static/images/z_standard2.jpg" alt=""/>
                                    <img src="./static/images/z_standard2.jpg" alt=""/>
                                    </div>
                                    <div>
                                        <img src="./static/images/z_standard2.jpg" alt=""/>
                                        <img src="./static/images/z_standard2.jpg" alt=""/>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td style="font-size:18px;font-weight:bold;">净重</td>
                                <td>124KG</td>
                            </tr>
                            <tr>
                                <td style="font-size:18px;font-weight:bold;">材质</td>
                                <td>真皮</td>
                            </tr>
                            <tr>
                                <td style="font-size:18px;font-weight:bold;">尺寸</td>
                                <td>长93CM*宽90CM*高100CM</td>
                            </tr>
                            <tr>
                                <td style="font-size:18px;font-weight:bold;">展开角度</td>
                                <td>160°</td>
                            </tr>
                            <tr>
                                <td style="font-size:18px;font-weight:bold;">配置组成</td>
                                <td>
                                    <p style="text-align: left;margin-left:180px;">1.音乐放松功能椅1张 <br/>
                                    2.液晶触控面板1个 <br/>
                                    3.内置高保真音箱1套 <br/>
                                    4.视听资料1套 <br/>
                                    5.音乐耳机1个 <br/>
                                    6.音乐放松椅使用说明书1本</p>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="contant-con con_list" mid="1">
                        <table width="1200px" height="550" bordercolor="#b2b2b2" cellpadding="0" cellspacing="0" border="1" style="border-collapse:collapse;text-align: center;">
                            <tr>
                                <td style="font-size:18px;font-weight:bold;">型号</td>
                                <td>BR/FS-02</td>
                                <td rowspan="6">
                                    <p style="font-size:18px;font-weight:bold;">音乐放松椅 <br/>
                                        （标准型）</p>
                                    <div>
                                        <img src="./static/images/z_standard2.jpg" alt=""/>
                                        <img src="./static/images/z_standard2.jpg" alt=""/>
                                    </div>
                                    <div>
                                        <img src="./static/images/z_standard2.jpg" alt=""/>
                                        <img src="./static/images/z_standard2.jpg" alt=""/>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td style="font-size:18px;font-weight:bold;">净重</td>
                                <td>60KG</td>
                            </tr>
                            <tr>
                                <td style="font-size:18px;font-weight:bold;">材质</td>
                                <td>真皮</td>
                            </tr>
                            <tr>
                                <td style="font-size:18px;font-weight:bold;">尺寸</td>
                                <td>长93CM*宽90CM*高100CM</td>
                            </tr>
                            <tr>
                                <td style="font-size:18px;font-weight:bold;">展开角度</td>
                                <td>110°-165°</td>
                            </tr>
                            <tr>
                                <td style="font-size:18px;font-weight:bold;">配置组成</td>
                                <td>
                                    <p style="text-align: left;margin-left:180px;">1.音乐放松功能椅1张 <br/>
                                        2.12寸显示器1台 <br/>
                                        3.显示器支架1套 <br/>
                                        4.内置高保真音箱1套 <br/>
                                        5.视听资料1套 <br/>
                                        6.音乐耳机1个<br/>
                                        7. 音乐放松椅使用说明书1本
                                    </p>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="contant-con con_list" mid="2">
                        <table width="1200px" height="550px" bordercolor="#b2b2b2" cellpadding="0" cellspacing="0" border="1" style="border-collapse:collapse;text-align: center;">
                            <tr>
                                <td style="font-size:18px;font-weight:bold;">型号</td>
                                <td>BR/FS-01</td>
                                <td rowspan="6">
                                    <p style="font-size:18px;font-weight:bold;">音乐放松椅 <br/>
                                        （基础型）</p>
                                    <div>
                                        <img src="./static/images/z_standard2.jpg" alt=""/>
                                        <img src="./static/images/z_standard2.jpg" alt=""/>
                                    </div>
                                    <div>
                                        <img src="./static/images/z_standard2.jpg" alt=""/>
                                        <img src="./static/images/z_standard2.jpg" alt=""/>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td style="font-size:18px;font-weight:bold;">净重</td>
                                <td>55KG</td>
                            </tr>
                            <tr>
                                <td style="font-size:18px;font-weight:bold;">材质</td>
                                <td>真皮</td>
                            </tr>
                            <tr>
                                <td style="font-size:18px;font-weight:bold;">尺寸</td>
                                <td>长93CM*宽90CM*高100CM</td>
                            </tr>
                            <tr>
                                <td style="font-size:18px;font-weight:bold;">展开角度</td>
                                <td>110°-165°</td>
                            </tr>
                            <tr>
                                <td style="font-size:18px;font-weight:bold;">配置组成</td>
                                <td>
                                    <p style="text-align: left;margin-left:180px;">1. 音乐放松功能椅1张 <br/>
                                        2. 内置高保真音箱1套 <br/>
                                        3. 视听资料1套 <br/>
                                        4. 音乐耳机1个 <br/>
                                        5. 系统控制器1个 <br/>
                                        6. 音乐放松椅使用说明书1本
                                    </p>
                                </td>
                            </tr>
                        </table>

                    </div>
                    <div class="contant-con con_list" mid="3">
                        <table width="1200px" height="550px" bordercolor="#b2b2b2" cellpadding="0" cellspacing="0" border="1" style="border-collapse:collapse;text-align: center;">
                            <tr>
                                <td></td>
                                <td style="font-size:18px;font-weight:bold;">基础型</td>
                                <td style="font-size:18px;font-weight:bold;">标准型</td>
                                <td style="font-size:18px;font-weight:bold;">按摩型</td>
                            </tr>
                            <tr>
                                <td style="font-size:18px;font-weight:bold;">体感共振</td>
                                <td><img src="./static/images/z_true.png" alt=""/></td>
                                <td><img src="./static/images/z_true.png" alt=""/></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td style="font-size:18px;font-weight:bold;">人体工程学设计</td>
                                <td><img src="./static/images/z_true.png" alt=""/></td>
                                <td><img src="./static/images/z_true.png" alt=""/></td>
                                <td><img src="./static/images/z_true.png" alt=""/></td>
                            </tr>
                            <tr>
                                <td style="font-size:18px;font-weight:bold;">音乐放松系统</td>
                                <td><img src="./static/images/z_true.png" alt=""/></td>
                                <td><img src="./static/images/z_true.png" alt=""/></td>
                                <td><img src="./static/images/z_true.png" alt=""/></td>
                            </tr>
                            <tr>
                                <td style="font-size:18px;font-weight:bold;">高保真音箱</td>
                                <td><img src="./static/images/z_true.png" alt=""/></td>
                                <td><img src="./static/images/z_true.png" alt=""/></td>
                                <td><img src="./static/images/z_true.png" alt=""/></td>
                            </tr>
                            <tr>
                                <td style="font-size:18px;font-weight:bold;">智能调节</td>
                                <td><img src="./static/images/z_true.png" alt=""/></td>
                                <td><img src="./static/images/z_true.png" alt=""/></td>
                                <td><img src="./static/images/z_true.png" alt=""/></td>
                            </tr>
                            <tr>
                                <td  style="font-size:18px;font-weight:bold;">存储系统</td>
                                <td><img src="./static/images/z_true.png" alt=""/></td>
                                <td><img src="./static/images/z_true.png" alt=""/></td>
                                <td><img src="./static/images/z_true.png" alt=""/></td>
                            </tr>
                            <tr>
                                <td style="font-size:18px;font-weight:bold;">液晶播放器</td>
                                <td></td>
                                <td><img src="./static/images/z_true.png" alt=""/></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td style="font-size:18px;font-weight:bold;">音乐随动</td>
                                <td></td>
                                <td></td>
                                <td><img src="./static/images/z_true.png" alt=""/></td>
                            </tr>
                            <tr>
                                <td style="font-size:18px;font-weight:bold;">太空舱零重力模式</td>
                                <td></td>
                                <td></td>
                                <td><img src="./static/images/z_true.png" alt=""/></td>
                            </tr>
                            <tr>
                                <td style="font-size:18px;font-weight:bold;">仿真人按摩</td>
                                <td></td>
                                <td></td>
                                <td><img src="./static/images/z_true.png" alt=""/></td>
                            </tr>
                            <tr>
                                <td style="font-size:18px;font-weight:bold;">远红外加热</td>
                                <td></td>
                                <td></td>
                                <td><img src="./static/images/z_true.png" alt=""/></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        </div>
</div>

css:

/*main4 */
.z_main4{
    padding-bottom:60px;
}
.tabbox{width:1200px;margin:0 auto;}
.nav-list{height:60px;padding-bottom:30px;}
.lists{width:300px}
.nav-list li{float:left;width:300px;text-align: center;background:#a4a4a4;}
.list_w>li{
    height:68px;
    width:300px;
}
.nav-0{}
.nav-1{cursor:pointer;}
.nav-2{cursor:pointer;}
.nav-list .nav-cus-0{background:url(../images/z_tab_bg.png) no-repeat center;}
.nav-list .nav-cus-1{background:url(../images/z_tab_bg.png) no-repeat center;}
.nav-list .nav-cus-2{background:url(../images/z_tab_bg.png) no-repeat center;}
.nav-list .nav-cus-3{background:url(../images/z_tab_bg.png) no-repeat center;}
.nav-list .nav-cus-0,.nav-list .nav-cus-1,.nav-list .nav-cus-2,.nav-list .nav-cus-3{
    padding-bottom:17px;
    background-size:300px 85px;
}
.nav-0 a,.nav-1 a,.nav-2 a,.nav-3 a{font-family:"微软雅黑";color:#fff;height:68px;line-height:68px;font-size:24px;}
.nav-cus-0 a,.nav-cus-1 a,.nav-cus-2 a,.nav-cus-3 a{font-family:"微软雅黑";color:#fff;height:68px;line-height:68px;font-size:24px;}
.nav-0 a:hover,.nav-1 a:hover,.nav-2 a:hover,.nav-3 a:hover{font-family:"微软雅黑";color:#fff;height:68px;line-height:68px;font-size:24px;}
.contant{width:1200px;overflow:hidden;position:relative;}
.inner{width:4800px;position:relative;}
.contant-con{float:left;width:1200PX;}

js:

/**
 * Created by h-0002 on 2017/6/5.
 */
var n_c_ser = 0;//设置初始值为0；
function t_player(cur){
    $('ul.nav-list > li').eq(n_c_ser).removeClass("nav-cus-"+n_c_ser);
    if(cur==null){
        n_c_ser = ++n_c_ser % 4;   //递加函数
    }else{
        n_c_ser = cur;
    }
    if(n_c_ser !=0 ){
    }
    $('.inner').animate({marginLeft:(-1 * n_c_ser * 1200) + 'px'});//下面内容的动画效果左移动1024px；

    $('ul.nav-list > li').eq(n_c_ser).addClass("nav-cus-"+n_c_ser);
    $('ul.nav-list > li').eq(n_c_ser).addClass("nav-cus-"+n_c_ser);
    var Hig = $(document).scrollTop();
    if (Hig > 5200) return false;
}
var n_t = setInterval('t_player()', 5000);//每隔5秒 执行一次

$('ul.nav-list > li span').hover(function(){//当我鼠标悬浮上去的时候
    var self = this;
    clearInterval(n_t);   //清除动画
    $('.inner').stop();
    var mid = $(this).parent().index()
    $('ul.nav-list > li').eq(n_c_ser).addClass("nav-cus-"+n_c_ser);
    t_player(mid);
},function(e){
    n_t = setInterval('t_player()', 5000);//当鼠标离开的时候  继续执行上面循环的函数
});
$('.inner .contant-con').hover(function(){//当我鼠标悬浮上去的时候
    clearInterval(n_t);   //清除动画
},function(e){
    n_t = setInterval('t_player()', 5000);//当鼠标离开的时候  继续执行上面循环的函数
});