我的JavaScript幻灯片效果！

最新推荐文章于 2025-09-04 17:39:42 发布

原创最新推荐文章于 2025-09-04 17:39:42 发布 · 3.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function #html #border #transition #div

AJAX 专栏收录该内容

1 篇文章

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>新乡市局主页</title>

var imgUrl=new Array();

var imgLink=new Array();

var imgTitle=new Array();

var imgDigest=new Array();

var adNum=0;

var it=1;

imgUrl[it]="http://www.smallrain.net/jsimg/istsample1.jpg";

imgLink[it]="http://www.smallrain.net";

imgTitle[it]="标题一";

imgDigest[it++]="详细内容一";

imgUrl[it]="http://www.smallrain.net/jsimg/istsample2.jpg";

imgLink[it]="http://www.51gongwen.com";imgTitle[it]="标题二";

imgDigest[it++]="详细内容二";

//var imgPre=new Array();

var j=0;

for (i=1;i<=imgUrl.length-1;i++) {

if( (imgUrl[i]!="") && (imgLink[i]!="") && (imgTitle[i]!="") ) {

j++;

} else {

break;

}

function playTran(){

if (document.all){

document.imgInit.filters[0].play();

}

function nextAd(){

if(adNum<j)adNum++ ;

else adNum=1;

if (document.all){

document.imgInit.filters[0].Transition=26;

document.imgInit.filters[0].apply();

}

document.images.imgInit.src=imgUrl[adNum];

title.innerHTML=(imgTitle[adNum]);

digest.innerHTML=(imgDigest[adNum]);

document.getElementById("tu").innerHTML='';

for(var i=1; i<it; i++){

document.getElementById("tu").innerHTML+= '<span'

+ ' style="border:1px solid #333333;padding:1px 5px 1px 5px;height:20px;text-align:center;cursor:hand;'

+ (adNum==i ? ('background-color:red;"') : '" onmouseover="selec(' + i + ')"')

+ '>'

+ '<b>0'+i+ '</b></span> ';

}

playTran();

theTimer=setTimeout("nextAd()", 7000);

}

function goUrl(){

jumpUrl=imgLink[adNum];

jumpTarget='_blank';

if (jumpUrl != ''){

if (jumpTarget != '')

window.open(jumpUrl,jumpTarget);

else

location.href=jumpUrl;

}

function selec(a){

window.clearTimeout(theTimer);

adNum=a-1;

nextAd();

};

</script>

</head>

<body>

<a onClick="goUrl()" style="cursor: hand;"><img style="FILTER: progid:DXImageTransform.Microsoft.RevealTrans (duration=1,transition=3);

border-color:#000000;color:#000000;margin-bottom:0px" src="javascript:nextAd()" border=0 name=imgInit></a>

</td>

</td>

</tr><tr>

</tr>

</table>

</body>

</html>

另外还有一篇，效果相似，只是不知为何效果只显示第一次。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

</HEAD>

<BODY>

<!--

function adRotator() {};

adRotator.initialize=function(o)

{

// script by blueDestiny

this._t = new Array();

this._l = new Array();

this._p = new Array();

this._n = new Array();//text,内容

this._i = new Image();

this._c = 0;

this._f = false;

this._o = o;

this._timeout = null;

this._html = "";

// configration.

// @ image width

// @ image height

// @ rotator speed

// @ filter type

this._w = 300;

this._h = 300;

this._s = 4;

this._x = 12;

return this;

};

adRotator.add=function(p,t,l,n) { with (this)

{

_p.push(p);

_t.push(t);

_l.push(l);

_n.push(n);

}};

adRotator.load=function() { with (adRotator)

{

if( _i.readyState=='complete' )

{

if(_p.length-1==_c)

{

_f = true;

_c = 0;

window.clearTimeout(_timeout);

//getRef("AdRotator").innerHTML="complete";

adRotator.play();

}

else

{

_c++;

getRef(_o).innerHTML="total images " + _p.length + ", loading picture " + _c + ' ' + _i.readyState + "...";

_timeout=window.setTimeout(adRotator.load,10)

}

else

{

getRef(_o).innerHTML="total images " + _p.length + ", loading picture " + _c + ' ' + _i.readyState + "...";

_timeout=window.setTimeout(adRotator.load,10)

}

}};

adRotator.play=function() { with (adRotator)

{

if( _f )

{

_html = "";

_html += '<table style="border:1px solid #333333;"><tr><td style="font-size:9pt;font-family:tahoma;font-weight:bold;">'

_html += '<div id="rotatorPlayer"'

+ ' style="width:' + _w + ''

+ ';height:"' + _h + '"'

+ '>'

_html += '<a href="' + ( _l[_c] ? _l[_c] : "javascript:void(0);" ) + '">';

_html += '<img id="rotatorPic" src="' + _p[_c] + '"'

+ ' width="' + _w + '"'

+ ' height="' + _h + '"'

+ (_t[_c]?' title="' + _t[_c] + '"':'')

+ ' style="border:1px solid blue;FILTER:revealTrans(transition=' + _x + ',duration=1);"'

+ ' >';

_html += (_t[_c]?('<div align="center">' + (_c+1) + '. ' + _t[_c] + '</div>'):'<p></p>');

_html += '</a>';

//以下2行是我加的：

_html +='<br>'

+(_n[_c]?_n[_c]:'<p></p>');

_html += "</div>";

_html += '<div align="right">';

for(var i=0; i<_p.length; i++)

_html += '<span'

+ ' style="border:1px solid #333333;padding:1px 5px 1px 5px;height:20px;text-align:center;cursor:'

+ (_c==i ? ('default;background-color:red;"') : 'hand;" onclick="adRotator.select(' + i + ')"')

+ '>'

+ (i>8?(i+1):('0'+(i+1)))+ '</span> ';

_html += "</div></td></tr></table>";

getRef(_o).innerHTML = _html;

getRef("rotatorPic").filters[0].Apply();

getRef("rotatorPic").filters[0].Play();

next();

}

else

{

_i.src = _p[_c];

adRotator.load();

}

}};

adRotator.next=function() { with (this)

{

(_p.length-1==_c) ? _c=0 : _c++;

_timeout=window.setTimeout(adRotator.play,_s*1000);

}};

adRotator.select=function(i) { with (this)

{

window.clearTimeout(_timeout);

_c=i;

adRotator.play();

}};

adRotator.set=function(second) { with (this)

{

window.clearTimeout(_timeout);

if((/d+/).test(second)==true)

{

_s=second;

adRotator.play();

}

else

{

alert("must be digit!")

adRotator.play();

}

}};

function getRef(id)

{

return (document.all?document.all(id):document.getElementById(id));

}

adRotator.initialize("AdRotator");

adRotator.add("0114.JPG","无忧IT网幻灯片特效代码","http://www.51it.org",'这是新闻内容,<br>第二行')

adRotator.add("main_1.gif","无忧IT网幻灯片特效代码","http://www.51it.org",'这是新闻内容,<br>第二行')

adRotator.play();

//-->

</SCRIPT>

</BODY>

</HTML>