选项卡+轮播的实现
Posted 和路雪
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了选项卡+轮播的实现相关的知识，希望对你有一定的参考价值。
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);//当鼠标离开的时候 继续执行上面循环的函数 });
以上是关于选项卡+轮播的实现的主要内容，如果未能解决你的问题，请参考以下文章