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