首先，要有一个显示窗口，设置属性为超出部分隐藏，然后将下面选项的所有内容平铺在网页中，每张选项的长度都一样，
给它一个相对定位，每个选项下标对应一张选项图，相对于初始位置往左或者往右移动多少张选项图的位置
代码如下：
|
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
});
}
|