初學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