日期:2014-05-16  浏览次数:20342 次

csdn首页的左上方的图片返转怎么制作的?
在csdn的首页,左上方有一个新闻,有1,2,3,4,5的他会自动翻转,每一个框一个新闻,点击会打开新闻。那么这个框怎么弄?
图片如下
http://blog.chinaitlab.com/user1/612517/upload/2007275842.jpg

------解决方案--------------------
给你提供一个思路
经过固定时间间隔(可以用setInterval()函数)动态设定图片和链接的HTML
------解决方案--------------------
前边梅花雪有个帖子你去看看吧

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<meta name= "author " content= "meizz " />
<meta http-equiv= "Content-Type " content= "text/html; charset=GB2312 " />
<script type= "text/javascript " src= "http://www.csdn.net/ui/scripts/jsframework.js "> </script>

<script type= "text/javascript " src= "MzDataProvider.js "> </script>

<script type= "text/javascript " src= "MzRotateImage.js "> </script>
<title> CSDN 轮换广告 </title>
</head>

<body style= "margin: 3px ">
<script type= "text/javascript ">

var data = {}
data[ "-1_1 "] = "img: http://zi.csdn.net/no1.280-187.gif; url: http://z.csdn.net/adclick.php?bannerid=395; target: _blank; alt: ; ";
data[ "-1_2 "] = "img: http://zi.csdn.net/no2-280_187.gif; url: http://z.csdn.net/adclick.php?bannerid=459; target: _blank; alt: ; ";
data[ "-1_3 "] = "img: http://zi.csdn.net/no3.gif; url: http://z.csdn.net/adclick.php?bannerid=401; target: _blank; alt: ; ";
data[ "-1_4 "] = "img: http://zi.csdn.net/no4.jpg; url: http://z.csdn.net/adclick.php?bannerid=410; target: _blank; alt: ; ";
data[ "-1_5 "] = "img: http://zi.csdn.net/no5.jpg; url: http://z.csdn.net/adclick.php?bannerid=369; target: _blank; alt: ; ";
data[ "-1_6 "] = "img: http://zi.csdn.net/no.6.280.187.gif; url: http://z.csdn.net/adclick.php?bannerid=372; target: _blank; alt: ; ";

var ri = new MzRotateImage();
ri.dataSource = data;
ri.width = 280;
ri.height = 187;
ri.interval = 3000;
ri.duration = 2000;
document.write(ri.render());

</script>

</body>
</html>

------解决方案--------------------
/*---------------------------------------*\
| Subject: Rotate AD
| NameSpace: System.Web.UI.WebControls.MzRotateImage
| Author: meizz
| Created: 2006-11-11
| Version: 2006-12-06
|-----------------------------------
| MSN: huangfr@msn.com QQ:112889082 Copyright (c) meizz
| http://www.meizz.com/jsframework/ MIT-style license
| The above copyright notice and this permission notice shall be
| included in all copies or substantial portions of the Software
\*---------------------------------------*/
//Using( "System.Data.MzDataProvider ");
//Using( "System.Web.Forms.MzBehavior ");

//node{url, target, summary, img, alt}
function MzRotateImage()
{
MzDataProvider.call(this); this.stateChangeHandle(1);

this.width = 280;
this.height= 187;
this.timer = null;
this.interval = 3000;
this.duration = 2000;
this.activeIndex = 1;
this.currentIndex = 0;
this.floatControlBar = false;