初学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 <script type="text/javascript" >
2 $(document).ready(function(){
3
4 /*使用服务器端生成代码,id要与后面的class="hot_pic"内的图片对应*/
5 /*也可以可以使JSON*/
6 var data = [];
7 data['img_4'] ={'news_title':'京地铁4号线女员工媲美“空姐”','news_abs':'首末车时间确定，8月邀沿线居民试乘','news_url':'http://msn.china.ynet.com/view.jsp?oid=53769752'};
8 data['img_3'] ={'news_title':'周迅全智贤惊艳巴黎时装周','news_abs':'两美女同选黑色小礼服，周迅红唇抢眼','news_url':'http://msn.ent.ynet.com/view.jsp?oid=53794257'};
9 data['img_1'] ={'news_title':' 黄志忠做客MSN星月对话(视频)','news_abs':' 经典杨立仁，直播现场表演天津快板','news_url':'http://info.msn.com.cn/interview_subject/33718.shtml'};
10 data['img_2'] ={'news_title':' 令人惊叹的野生世界','news_abs':' 五色鸟守着巢穴，美洲豹偷窥邻居','news_url':'http://msn.tech.ynet.com/pic.jsp?oid=53794462'};
11
12 /*使用jQuery Cycle Plugin*/
13 $('.hot_pic').cycle({
14 fx: 'fade',
15 pause: 1 ,
16 pager: '.hot_thumb',
17 pagerAnchorBuilder: function(idx, slide) {
18 return '<a href="#"><img src="' + slide.src + '" width="40px" height="40px" /></a>';
19 },
20 before:function onAfter() {
21 $('.hot_title').html('<p style="font-weight:bold;"><a href="' + data[this.id].news_url + '">' + data[this.id].news_title + '</a></string></p><p>' + data[this.id].news_abs + '[<a href="' + data[this.id].news_url+ '">详细</a>]</p>');
22 }
23 });
24
25 });
26 </script>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title>图片切换</title>
6 <link href="index.css" rel="stylesheet" type="text/css" />
7 <script type="text/javascript" language="JavaScript" src="jquery.js"></script>
8 <script type="text/javascript" language="JavaScript" src="jquery.cycle.all.js"></script>
9 <script type="text/javascript" >
10 $(document).ready(function(){
11
12 /*使用服务器端生成代码,id要与后面的class="hot_pic"内的图片对应*/
13 /*也可以可以使JSON*/
14 var data = [];
15 data['img_4'] ={'news_title':'京地铁4号线女员工媲美“空姐”','news_abs':'首末车时间确定，8月邀沿线居民试乘','news_url':'http://msn.china.ynet.com/view.jsp?oid=53769752'};
16 data['img_3'] ={'news_title':'周迅全智贤惊艳巴黎时装周','news_abs':'两美女同选黑色小礼服，周迅红唇抢眼','news_url':'http://msn.ent.ynet.com/view.jsp?oid=53794257'};
17 data['img_1'] ={'news_title':' 黄志忠做客MSN星月对话(视频)','news_abs':' 经典杨立仁，直播现场表演天津快板','news_url':'http://info.msn.com.cn/interview_subject/33718.shtml'};
18 data['img_2'] ={'news_title':' 令人惊叹的野生世界','news_abs':' 五色鸟守着巢穴，美洲豹偷窥邻居','news_url':'http://msn.tech.ynet.com/pic.jsp?oid=53794462'};
19
20 /*使用jQuery Cycle Plugin*/
21 $('.hot_pic').cycle({
22 fx: 'fade',
23 pause: 1 ,
24 pager: '.hot_thumb',
25 pagerAnchorBuilder: function(idx, slide) {
26 return '<a href="#"><img src="' + slide.src + '" width="40px" height="40px" /></a>';
27 },
28 before:function onAfter() {
29 $('.hot_title').html('<p style="font-weight:bold;"><a href="' + data[this.id].news_url + '">' + data[this.id].news_title + '</a></string></p><p>' + data[this.id].news_abs + '[<a href="' + data[this.id].news_url+ '">详细</a>]</p>');
30 }
31 });
32
33 });
34 </script>
35 </head>
36
37 <body>
38 <div class="hot">
39 <div class="hot_pic">
40 <img id="img_1" src="1.jpg" width="240" height="180" />
41 <img id="img_2" src="2.jpg" width="240" height="180" />
42 <img id="img_3" src="3.jpg" width="240" height="180" />
43 <img id="img_4" src="4.jpg" width="240" height="180" />
44 </div>
45 <div class="hot_thumb"></div>
46 <div class="clear"></div>
47 <div class="hot_title">
48 </div>
49 </div>
50 </body>
51 </html>
52