制作一个滑动的选项卡

佚名 6年前 (2019-04-13) 随笔 1590人围观抢沙发百度已收录

首先，要有一个显示窗口，设置属性为超出部分隐藏，然后将下面选项的所有内容平铺在网页中，每张选项的长度都一样，

给它一个相对定位，每个选项下标对应一张选项图，相对于初始位置往左或者往右移动多少张选项图的位置

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 < div class="toutiao"> < div class="newsbox"> < div class="newstab"> < ul class="newstabs"> < li class="yjk" onclick="yidong('0','0')">头条</ li > < li class="yjk" onclick="yidong('353','1')">新闻</ li > < li class="yjk" onclick="yidong('706','2')">公告</ li > < li class="yjk" onclick="yidong('1059','3')">活动</ li > < li class="yjk" onclick="yidong('1412','4')">直播</ li > < li id="more">更多+</ li > </ ul > </ div > < div class="listpart"> < div class="listbox"> < ul class='xiangmu'> < ul class='xiangmu'> < ul class='xiangmu'> < ul class='xiangmu'> < ul class='xiangmu'> </ div > </ div > </ div > </ div >

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 .toutiao{ width : 393px ; height : 300px ; position : relative ; margin : 15px 280px 0 0 ; background : #fff ; overflow : hidden ; float : left ; } .newsbox{ width : 393px ; height : 281px ; position : relative ; overflow : hidden ; outline : none ; padding : 15px 20px 0 ; } .newstab{ width : 353px ; height : 43px ; } .newstabs li:hover{ color : #01B8A9 ; } .newstabs{ width : 351px ; height : 43px ; overflow : hidden ; list-style : none ; } .newstabs li{ width : 50px ; height : 43px ; float : left ; font-size : 14px ; color : #000 ; line-height : 43px ; text-align : center ; font-weight : 400 ; cursor : pointer ; } #more{ width : 50px ; height : 43px ; float : right ; font-size : 15px ; color : #000000 ; cursor : pointer ; } .listpart{ width : 351px ; height : 222px ; position : relative ; border-top : 1px solid #e4eae9 ; overflow : hidden ; z-index : 1 ; } .listbox{ width : 1765px ; height : 204px ; top : 15px ; position : absolute ; left : 0 ; } .xiangmu{ width : 353px ; height : 204px ; float : left ; font-size : 13px ; list-style : none ; }

下面是js方法

1 2 3 4 5 6 7 8 9 10 //选项卡滚动 function yidong(n,m){ var a=-n+ "px" ; $( ".yjk" ).css( "color" , "#000" ); $( ".yjk" )[m].style.color= "#01B8A9" ; $( ".listbox" ).stop().animate({ left:a }); }