不想说乔丹

本站动态

网上调查

广告推广区

轮换图片新闻原理

发布时间:2007-3-21 15:07:07

示例演示:http://www.wgg.com.cn/show_work/pic_news.html
浏览器要求:IE6及以上(其它浏览器下看不到数字导航条的背景渐变效果),并且支持javascript和CSS2
创意来源:看到网上有许多网站用Flash实现轮换图片新闻,就是图片一张一张自动轮换,点击进入相关的新闻页面.
原理:首先将几个新闻图片置入不同的div中,利用CSS将其叠加在一起,并隐藏,利用js中的setTimeout()每四秒(时间可以调整)递归调用一个div显示,利用CSS将下面的数字导航条背景设为渐变色,并利用js给每个数字添加onclick()事件,其中onclick()事件调用数字导航相对应的新闻图片.
优点:直接复制,不需会Flash就可制作出差不多的效果.
缺点:还没有添加图片轮换过渡效果.
源文件:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd'><html xmlns='http://www.w3.org/1999/xhtml'><head><meta http-equiv='Content-Language' content='zh-cn' /><meta http-equiv='Content-Type' content='text/html; charset=gb2312' /><meta name='author' content='不想说乔丹' /><meta name='keywords' content='不想说乔丹,乔丹,篮球,ASP,Web设计,XHTML,XML,HTML,CSS,VBscript,服务器,留言本,论坛,网站标准,asp生成静态页面,静态整站' /><meta name='description' content='不想说乔丹,乔丹,篮球,ASP,Web设计,XHTML,XML,HTML,CSS,VBscript,服务器,留言本,论坛,网站标准,asp生成静态页面,静态整站' /><title>不想说乔丹</title>
<style type="text/css">
/*定义数字标签位置，宽度及渐变背景颜色*/
#right_t {color:#fff;width:400px;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,startColorstr=#330000FF, endColorstr=#AA0000FF);text-align:right;position:absolute;top:300px;left:0}
#right_t span {color:#fff;text-decoration: none;font-weight:bold;}
/*定义新闻图片的高宽，并进行绝对定位，使所有新闻图片叠在一起*/
#show_display img {width:400px;height:300px;border:0;position:absolute;top:0;left:0;float:left;}
#show0,#show1,#show2,#show3 {visibility:hidden;}
#show_display {filter:progid:DXImageTransform.Microsoft.Wheel(duration=2,spokes=8);}
</style>
</head>

<body onLoad="show_play(0);">
<div id="show_display">

<div id="show0"><a href="/diary"><img src="/w_pic/diary.jpg" alt="日记本" /></a></div>
<div id="show1"><a href="/hj"><img src="/w_pic/hj.jpg" alt="海园" /></a></div>
<div id="show2"><a href="/jz"><img src="/w_pic/jz.gif" alt="记帐系统" /></a></div>
<div id="show3"><a href="/message"><img src="/w_pic/mes.jpg" alt="留言本" /></a></div>
<div id="right_t"><a href="#" onclick="aa_onclick(0);"><span id="show0_1">1</span></a>|<a href="#" onclick="aa_onclick(1);"><span id="show1_1" >2</span></a>|<a href="#" onclick="aa_onclick(2);"><span id="show2_1">3</span></a>|<a href="#" onclick="aa_onclick(3);"><span id="show3_1" >4</span></a></div>
</div>
<script type="text/javascript">
function show_play(i)
{
//函数show_play(i)的参数i初始值最好设为0，然后根据图片新闻数量多少定,如图片新闻为8，则将该函数中的4改为8,同时将函数中的3改为7
aa_onclick(parseInt(i%4));
i+=1;
if (i>3) i=0;
setTimeout("show_play("+i+")",4000);
}

function aa_onclick(num)
{
//本示例是以四张图片新闻为例，如更改图片新闻数量，下面语句则相应更改，包括初始化语句和if语句
with(document.all("show_display")){
filters[0].Apply();
if (num==0) {
children[1].style.visibility="visible";
document.all("show0_1").style.backgroundColor="#FF0000";
}
else{
children[1].style.visibility="hidden";
document.all("show0_1").style.backgroundColor="";
}

if (num==1) {
children[2].style.visibility="visible";
document.all("show1_1").style.backgroundColor="#FF0000";
}
else{
children[2].style.visibility="hidden";
document.all("show1_1").style.backgroundColor="";
}

if (num==2) {
children[3].style.visibility="visible";
document.all("show2_1").style.backgroundColor="#FF0000";
}
else{
children[3].style.visibility="hidden";
document.all("show2_1").style.backgroundColor="";
}

if (num==3) {
children[4].style.visibility="visible";
document.all("show3_1").style.backgroundColor="#FF0000";
}
else{
children[4].style.visibility="hidden";
document.all("show3_1").style.backgroundColor="";
}
filters[0].play();
}
}
</script>
</body>
</html>