初学jquery,觉得很好玩。欢迎拍砖指正
我实现的效果截图
msn的效果截图
全部是js实现的,效果还不错,可以IE7,ff3,Chrome上正常运行,这里是demo[查看]
其中使用了jquery1.3.2[下载],jquery.cycle.all.js[下载]
所有文件在这里[下载]
1 body {
2 font-family: Arial, Helvetica, sans-serif;
3 font-size: 12px;
4 font-style: normal;
5 line-height: normal;
6 font-weight: normal;
7 }
8 .clear{
9 clear:both;
10 height:0px;
11 }
12 .hot {
13 background-color: #F7F7F7;
14 height: 227px;
15 width: 302px;
16 border: 1px solid #DEDEDE;
17 padding-right:5px;
18 }
19
20 .hot_pic {
21 height: 190px;
22 width: 250px;
23 padding: 0;
24 margin: 0;
25 float:left;
26 clear:left;
27 }
28
29 .hot_pic img {
30 background-color: #eee;
31 width: 240px;
32 height: 180px;
33 top: 0;
34 left: 0 ;
35 padding: 5px;
36 }
37 .hot_thumb{
38 float:right;
39 clear:right;
40 height:190px;
41 width:52px;
42 }
43 .hot_thumb a { width: 52px; height:48px; display: block;padding-
top:0px;margin-top:0px;}
44 .hot_thumb a.activeSlide {
45 background-image: url(activeSlide.png);
46 }
47 .hot_thumb a:focus { outline: none; }
48 .hot_thumb img { border: none; margin-top:4px;margin-right:4px;margin-
bottom:4px;margin-left:8px;}
49
50 .hot_title p{margin:0 0;line-height:18px;padding-left:5px;}
51
1
1
2
3
4
5
6
7
8
9
35
36
37
38
39
40

41

42

43

44
45
46
47
48
49
50
51
52