一个不错的幻灯片效果(JS脚本)-优快云博客

本文介绍了一个简单的图片新闻轮播实现方案，通过JavaScript控制图片切换，并利用HTML和CSS进行布局和样式设置。该方案支持自动播放和手动切换，适用于网站的图片展示模块。

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

<head>

<!--

body {

background-image: url(FQNP-2007-IMAGES/l1.gif);

background-repeat: repeat-y;

background-position: 49px;

}

.itemOff {

color: #0099CC;

cursor: hand;

background-color: #ECF7FF;

height: 20px;

margin-right: 1px;

margin-left: 1px;

padding-right: 5px;

padding-left: 5px;

border: 1px solid #ABDEFA;

}.itemOn {

color: #FF0000;

cursor: hand;

background-color: #ABDEFA;

height: 20px;

margin-right: 1px;

margin-left: 1px;

padding-right: 5px;

padding-left: 5px;

border: 1px solid #ABDEFA;

}

body,td,th {

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

}

-->

</style>

</head>

<!--

/* Data begin */

var sPicArr = new Array();

sPicArr[0] = new Array('UpLoad/20071115165029.JPG','天安门夜景','','Shownews.aspx?ID=1231','');

sPicArr[1] = new Array('UpLoad/20071115164742.JPG','香山红叶','','Shownews.aspx?ID=1230','');

sPicArr[2] = new Array('UpLoad/20071022100128.JPG','夕阳','','Shownews.aspx?ID=1158','');

sPicArr[3] = new Array('UpLoad/20071015091114.JPG','那拉提草原风景','','Shownews.aspx?ID=1138','');

sPicArr[4] = new Array('UpLoad/20071015090219.JPG','喀纳斯湖风光','','Shownews.aspx?ID=1137','');

sPicArr[5] = new Array('UpLoad/20070920103404.JPG','喀纳斯湖—月亮湾','','Shownews.aspx?ID=1113','');

/* Data end */

function GetObj(objName){

if(document.getElementById){

return eval('document.getElementById("' + objName + '")');

}else if(document.layers){

return eval("document.layers['" + objName +"']");

}else{

return eval('document.all.' + objName);

}

var plPic = new Image();

var gIndex = 0;

function SlidePic(index){

gIndex = index;

//patch by dorian 1017

if ('Microsoft Internet Explorer' == navigator.appName)

{

document.images["slidePic"].filters.item(0).Apply();

}

document.images["slidePic"].src = sPicArr[index][0];

document.images["slidePic"].alt = sPicArr[index][1];

GetObj("slidePicLink").href = sPicArr[index][3];

GetObj("slideTitle").innerHTML = sPicArr[index][1];

GetObj("slideDesc").innerHTML = sPicArr[index][2];

// GetObj("slideLink").innerHTML = "[<a href='"+sPicArr[index][3]+"' target=_blank title='全文'>全文</a>]";

if((index+1)<sPicArr.length) plPic.src = sPicArr[index+1][0];//preload;

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

GetObj("item"+i).className = "itemOff";

GetObj("item"+i).onmouseover = function(){return false;}

GetObj("item"+i).onmouseout = function(){return false;}

}

GetObj("item"+index).className = "itemOn";

/*fixed by AmourGUO, 051017

GetObj("item"+index).onmouseover = function(){

pauseslide();

}

GetObj("item"+index).onmouseout = function(){

inislide();

}

if ('Microsoft Internet Explorer' == navigator.appName)

{

document.images["slidePic"].filters.item(0).play();

}

function NextPic(){

gIndex = ((gIndex+1)>=sPicArr.length?0:(gIndex+1));

SlidePic(gIndex);

}

function PrevPic(){

//alert(gIndex);

gIndex = ((gIndex-1)<0?(sPicArr.length-1):(gIndex-1));

//alert(gIndex);

SlidePic(gIndex);

}

var sid;

function inislide()

{

if(sid==null) sid = setInterval('NextPic()', 6000);//fixed by AmourGUO, 051017

}

function pauseslide()

{

clearInterval(sid);

sid = null;//fixed by AmourGUO, 051017

}

//-->

</script>

<tbody>

<img src="images o_picture1.gif" alt="" name="slidePic" width="200" height="150"

border="0" align="middle" id="slidePic" style="filter: revealtrans(duration=2.0,transition=12)"

onmouseover="pauseslide();" onmouseout="inislide();"></a></div></td>

</tr>

</td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<td width="23"><img style="cursor: pointer" onclick="PrevPic();pauseslide();inislide()" height="19"

alt="上一张" src="images/gw_news_img_05.gif" width="23" /></td>

<!--

document.writeln("<span id='item0' class='te2' onClick='SlidePic(0)'>1</span>");

for(var i=1;i<sPicArr.length;i++){

document.writeln("<span id='item"+i+"' class='te2' onClick='SlidePic("+i+");'>"+(i+1)+"</span>");//fixed by AmourGUO, 051017

}

//-->

</script>

</td>

<td width="23"><img style="cursor: pointer" onclick="NextPic();pauseslide();inislide()" height="19"

alt="下一张" src="images/gw_news_img_06.gif" width="23" /></td>

</tr>

</tbody>

</table><div id="slideTitle" style="text-align:center; line-height:20px; color:#0066CC">

<div align="center">福建福清核电有限公司首页</div>

</div>

<div>

</body>

</html>