这种漂亮的图片显示效果如何做？

GGBOYS 2006-09-06 11:10:37

http://www.binhaistar.com/kefang/default.htm

在这个叶面上的图片时每隔几秒钟就自动变换的，如何实现呢？清执教，谢谢！

...全文

423 14 打赏收藏转发到动态举报

写回复

用AI写文章

14 条回复

切换为时间正序

请发表友善的回复…

发表回复

anwell 2006-09-08

打赏
举报

JS就可以做喽


<script language=JavaScript>
var imgUrl=new Array();
var imgLink=new Array();
var imgTz=new Array();
var buttonShow=1;
var buttonPos=1;
var buttonX;
var buttonY;
var bakularCode="";
var adNum=0;
var dakularCode="";
imgUrl[1]="/upfiles/20060825/2006082511272577.gif";
imgLink[1]="/info/view.asp?id=62";
imgTz[1]="<a href=\"/info/view.asp?id=62\" target=_blank title=\"China : Domestic sale exceeds export in clothing trade\">      In order to avoid export risks, many textile units shift to domestic market. In the first half 2006, it was obvious tha...</a>";
imgUrl[2]="/upfiles/20060825/2006082511273543.gif";
imgLink[2]="/info/view.asp?id=61";
imgTz[2]="<a href=\"/info/view.asp?id=61\" target=_blank title=\"U.S. Trade Chief Plans to Visit China\">      KUALA LUMPUR, Malaysia — U.S. trade chief Susan Schwab says she will make a three-day visit to China starting Sunday t...</a>";
imgUrl[3]="/upfiles/20060825/2006082511274987.gif";
imgLink[3]="/info/view.asp?id=44";
imgTz[3]="<a href=\"/info/view.asp?id=44\" target=_blank title=\"China : 4183 textile units win textile export quota\">      China Commerce Bureau has issued the results of textile export quota bidding to the US and EU during 2006. Total 4183 t...</a>";
imgUrl[4]="/upfiles/20060825/2006082511274987.gif";
imgLink[4]="/info/view.asp?id=33";
imgTz[4]="<a href=\"/info/view.asp?id=33\" target=_blank title=\"Shenzhen garment company gives a dressing down\">      Sun Mingyuan did not expect to win when his garment company sued five textile manufacturers and retailers for violating...</a>";
var imgPre=new Array();
for (i=1;i<8;i++)
{
imgPre[i]=new Image();
imgPre[i].src=imgUrl[i];
}
function setTransition()
{
if (document.all)
{
imgUrlrotator.filters.revealTrans.Transition=23;//Math.floor(Math.random()*23)
imgUrlrotator.filters.revealTrans.apply();
}
}
function playTransition()
{
if (document.all)
imgUrlrotator.filters.revealTrans.play()
}
function nextAd(toNum)
{
if(adNum<imgUrl.length-1)
adNum++ ;
else
adNum=1;
if(toNum!=null) adNum=toNum;
setTransition();
document.images.imgUrlrotator.src=imgUrl[adNum];
document.getElementById('linktext').innerHTML=imgTz[adNum];
document.images.imgUrlrotator.alt='TopNews: '+imgTz[adNum];
document.getElementById('linktext').innerHTML="<a href="+imgLink[adNum]+" target=_blank class=px14-lh20>"+imgTz[adNum]+"</a>";
playTransition();
checkButton();
if(toNum!=null)
{toNum=null;theTimer=setTimeout("nextAd()", 7000);}
else
{theTimer=setTimeout("nextAd()", 7000);}
}
function jump2url()
{
jumpUrl=imgLink[adNum];jumpTarget='_blank';
if (jumpUrl != '')
{ if (jumpTarget != '')
window.open(jumpUrl,jumpTarget);
else location.href=jumpUrl;
}
}
function displayStatusMsg()
{
status=imgLink[adNum];
document.returnValue = true;
}
function checkButton()
{
for(i=1;i<=imgUrl.length-1;i++)
{if(i==adNum)
//document.getElementById('bt'+i).style.backgroundColor='#F0F0F0';
eval("bt"+i+".style.backgroundColor='#f90';bt"+i+".style.color='#612501';");
else
eval("bt"+i+".style.backgroundColor='#F0F0F0';bt"+i+".style.color='#612501';");
}
}
function dakularButtons()
{
if(buttonShow==1)
{
switch(buttonPos)
{
case 1:{buttonX=278+20-imgUrl.length*20;buttonY=16;break;}
case 2:{buttonX=278+20-imgUrl.length*20;buttonY=125;break;}
case 3:{buttonX=imgUrl.length*20-100;buttonY=16;break;}
case 4:{buttonX=imgUrl.length*20-100;buttonY=125;break;}
default:{buttonX=278+20-imgUrl.length*20;buttonY=16;break;}
}
for(i=1;i<=imgUrl.length-1;i++)
{
dakularCode=dakularCode+"<div id='bt"+i+"' style='display:inline; height=15px; width:21px; border:1px solid #000000; background-color:#00FF00; color:#00FF00; font-size:14px; line-height:14px;' align='center' onMouseOver=this.style.backgroundColor='#FFFFFF';this.style.color='#000000';this.style.cursor='hand' onMouseOut=checkButton(); onClick='clearTimeout(theTimer);nextAd("+i+");'>"+i+"</div>";
}
dakularCode="<div style='display:inline; position:relative;left:"+buttonX+"px; top:"+buttonY+"px; z-index:1;'>"+dakularCode+"</div>";
document.write(dakularCode);
}
}
</script>
<table border="0" cellpadding="0" cellspacing="0" id=newsTable style="position:relative; top:-15px; left: 0px;" name="newsTable">
<script language="javascript">dakularButtons();</script><tr><td><a onMouseOver="displayStatusMsg();return document.returnValue;" onMouseOut="status='';" href="javascript:jump2url()"><img style="FILTER: revealTrans(duration=1,transition=23); border:1px solid #000000" src="javascript:nextAd()" width=280 height=170 border=0 name=imgUrlrotator alt="Top News"></a></td></tr>
<tr><td bgcolor="#f0f0f0" align="center" style="border-bottom:1px solid #000000; border-left:1px solid #000000;border-right:1px solid #000000;padding-top:5px;padding-bottom:5px"><label id="linktext"></label></td></tr>
</table>

hongzi001179 2006-09-08

打赏
举报

记号

doughty 2006-09-08

打赏
举报

jpyc 2006-09-08

打赏
举报

JS和FLASH联合使用

eduxh 2006-09-07

打赏
举报

现在一般都是JS和FLASH联合使用

GGBOYS 2006-09-07

打赏
举报

谢谢大家，还有好的方法吗？多交流阿！

ptma 2006-09-06

打赏
举报

可以精简很多哦!

我贴的是JS 的 , 不需要 Flash , 区别在这里!

basanovic 2006-09-06

打赏
举报

roseqiu1(冰儿)贴的代码跟我用的差不多，ptma(守望者) 的太长了吧

heyang714 2006-09-06

打赏
举报

他是用JS和FLASH联合使用的..
建议研究...

ptma 2006-09-06

打赏
举报

我发一个 JS 的
<style>
* {font-size:9pt;font-family:tahoma;}
</style>

<SCRIPT language=JavaScript> //动画控制开始

var imgUrl=new Array();
var imgLink=new Array();
var imgTitle=new Array();
var adNum=0;
imgUrl[1]='http://digital.zol.com.cn/88_module_images/13285.jpg';
imgLink[1]='http://mp3.zol.com.cn/28/287867.html';
imgTitle[1]='经典MP3又现身三星256MB仅售499元';
imgUrl[2]='http://digital.zol.com.cn/88_module_images/13270.gif';
imgLink[2]='http://mb.zol.com.cn/28/288161.html';
imgTitle[2]='别拿钱打水漂看哪六类主板买了准后悔';
imgUrl[3]='http://digital.zol.com.cn/88_module_images/13281.jpg';
imgLink[3]='http://net.zol.com.cn/28/288761.html';
imgTitle[3]='抢先报道世界杯便携式无线产品精选';
imgUrl[4]='http://digital.zol.com.cn/88_module_images/13276.jpg';
imgLink[4]='http://mouse.zol.com.cn/28/288733.html';
imgTitle[4]='国内首家! 游戏新品Qpad CT全面评测';
var imgPre=new Array();
var j=0;
for (i=1;i<=4;i++) {
if( (imgUrl[i]!="") && (imgLink[i]!="") ) {
j++;
} else {
break;
}
}

function playTran(){
if (document.all)
imgInit.filters.revealTrans.play();
}

var key=0;
function nextAd(){
if(adNum< j)adNum++ ;
else adNum=1;

if( key==0 ){
key=1;
} else if (document.all){
imgInit.filters.revealTrans.Transition=Math.floor(Math.random()*23);
imgInit.filters.revealTrans.apply();
playTran();

}
document.images.imgInit.src=imgUrl[adNum];
set_color(adNum);
img_title.innerHTML='<a href='+imgLink[adNum]+' title='+imgTitle[adNum]+' class=a_huei12b>'+imgTitle[adNum]+'</a>';
theTimer=setTimeout("nextAd()", 4000);
}

function set_color(ad_id){
document.getElementById('a1').style.background= '#ee8080';
document.getElementById('a2').style.background= '#ee8080';
document.getElementById('a3').style.background= '#ee8080';
document.getElementById('a4').style.background= '#ee8080';
document.getElementById('a'+ad_id).style.background= '#ffffff';
document.getElementById('a1').style.color= '#ffff00';
document.getElementById('a2').style.color= '#ffff00';
document.getElementById('a3').style.color= '#ffff00';
document.getElementById('a4').style.color= '#ffff00';
document.getElementById('a'+ad_id).style.color= '#ff8100';
}

function gogo(k) {
adNum = k;
set_color(k);
document.images.imgInit.src=imgUrl[k];
img_title.innerHTML='<a href='+imgLink[adNum]+' title='+imgTitle[adNum]+' class=a_huei12b>'+imgTitle[adNum]+'</a>';
}
function goUrl(){
jumpUrl=imgLink[adNum];
jumpTarget="_blank";
if (jumpUrl !=""){
if (jumpTarget != "")
window.open(jumpUrl,jumpTarget);
else
location.href=jumpUrl;
}
}
</SCRIPT>

<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD width=160 bgColor=#dc0100>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD width="9%"></TD>
<TD class=bei14b align=left>今日热点文章</TD></TR></TBODY></TABLE></TD>
<TD width=95 bgColor=#dc0100 height=26><A class=a_cheng12b id=a1 style="BACKGROUND: #ee8080; COLOR: #ffff00" href="javascript:gogo(1)" target=_self>1</A> <A class=a_cheng12b id=a2 style="BACKGROUND: #ffffff; COLOR: #ff8100" href="javascript:gogo(2)" target=_self>2</A> <A class=a_cheng12b id=a3 style="BACKGROUND: #ee8080; COLOR: #ffff00" href="javascript:gogo(3)" target=_self>3</A> <A class=a_cheng12b id=a4 style="BACKGROUND: #ee8080; COLOR: #ffff00" href="javascript:gogo(4)" target=_self>4</A>　</TD></TR></TBODY></TABLE>
<TABLE style="BORDER-RIGHT: #cccccc 1px solid; BORDER-TOP: #cccccc 1px solid; BORDER-LEFT: #cccccc 1px solid; BORDER-BOTTOM: #cccccc 1px solid" cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD align=middle bgColor=#ffffff height=192><SPAN style="CURSOR: hand" onclick=javascript:goUrl()><IMG class=img01 id=imgInit style="BORDER-LEFT-COLOR: black; FILTER: revealTrans(duration=1,transition=5); BORDER-BOTTOM-COLOR: black; COLOR: #000000; BORDER-TOP-COLOR: black; BORDER-RIGHT-COLOR: black" height=187 src="http://digital.zol.com.cn/88_module_images/13270.gif" width=250 border=1 name=imgInit></SPAN></TD></TR>
<TR>
<TD align=middle height=19>
<DIV id=img_title><A class=a_huei12b title=别拿钱打水漂 href="http://mb.zol.com.cn/28/288161.html" 看哪六类主板买了准后悔>别拿钱打水漂看哪六类主板买了准后悔</A></DIV></TD></TR></TBODY></TABLE>
<SCRIPT language=javascript>
document.getElementById('imgInit').src='javascript:nextAd();';
</SCRIPT>

roseqiu1 2006-09-06

打赏
举报

<SCRIPT type=text/javascript>

</SCRIPT>
</DIV>

这是他们的代码,只要把pics,links,texts改一下就可以了

ptma 2006-09-06