`
izuoyan
  • 浏览: 9206925 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

一个不错的幻灯片效果(JS脚本)

脚本JavaScriptCSSXHTML 
阅读更多


<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>图片新闻</title>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<metacontent="图片新闻"name="keywords">
<metacontent="新闻中心图片新闻"name="description">
<metacontent="1,231,1"name="publishid">

<styletype="text/css">
<!--
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:1pxsolid#ABDEFA;
}.itemOn...{
color:#FF0000;
cursor:hand;
background-color:#ABDEFA;
height:20px;
margin-right:1px;
margin-left:1px;
padding-right:5px;
padding-left:5px;
border:1pxsolid#ABDEFA;
}
body,td,th...{
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
}
-->
</style>
</head>
<bodyonload="SlidePic(0);inislide();">
<scriptlanguage="JavaScript"type="text/javascript">
<!--
/**//*Databegin*/
varsPicArr=newArray();

sPicArr[0]=newArray('UpLoad/20071115165029.JPG','夜景','','Shownews.aspx?ID=1231','');
sPicArr[1]=newArray('UpLoad/20071115164742.JPG','香山红叶','','Shownews.aspx?ID=1230','');
sPicArr[2]=newArray('UpLoad/20071022100128.JPG','夕阳','','Shownews.aspx?ID=1158','');
sPicArr[3]=newArray('UpLoad/20071015091114.JPG','那拉提草原风景','','Shownews.aspx?ID=1138','');
sPicArr[4]=newArray('UpLoad/20071015090219.JPG','喀纳斯湖风光','','Shownews.aspx?ID=1137','');
sPicArr[5]=newArray('UpLoad/20070920103404.JPG','喀纳斯湖—月亮湾','','Shownews.aspx?ID=1113','');


/**//*Dataend*/


functionGetObj(objName)...{
if(document.getElementById)...{
returneval('document.getElementById("'+objName+'")');
}elseif(document.layers)...{
returneval("document.layers['"+objName+"']");
}else...{
returneval('document.all.'+objName);
}
}
varplPic=newImage();
vargIndex=0;
functionSlidePic(index)...{
gIndex=index;
//patchbydorian1017
if('MicrosoftInternetExplorer'==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="[<ahref='"+sPicArr[index][3]+"'target=_blanktitle='全文'>全文</a>]";


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

for(vari=0;i<sPicArr.length;i++)...{
GetObj("item"+i).className="itemOff";
GetObj("item"+i).onmouseover=function()...{returnfalse;}
GetObj("item"+i).onmouseout=function()...{returnfalse;}
}
GetObj("item"+index).className="itemOn";
/**//*fixedbyAmourGUO,051017
GetObj("item"+index).onmouseover=function(){
pauseslide();
}
GetObj("item"+index).onmouseout=function(){
inislide();
}
*/
if('MicrosoftInternetExplorer'==navigator.appName)
...{
document.images["slidePic"].filters.item(0).play();
}

}

functionNextPic()...{
gIndex=((gIndex+1)>=sPicArr.length?0:(gIndex+1));
SlidePic(gIndex);
}

functionPrevPic()...{
//alert(gIndex);
gIndex=((gIndex-1)<0?(sPicArr.length-1):(gIndex-1));
//alert(gIndex);
SlidePic(gIndex);

}
varsid;
functioninislide()
...{
if(sid==null)sid=setInterval('NextPic()',6000);//fixedbyAmourGUO,051017
}
functionpauseslide()
...{
clearInterval(sid);
sid=null;//fixedbyAmourGUO,051017
}

//-->
</script>
<tablewidth="100%"cellspacing="0"align="center">
<tbody>
<tralign="center">
<tdalign="center"valign="middle">
<divalign="center"><ahref="#"title=""target="_blank"id="slidePicLink">
<imgsrc="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>
<tralign="center">
<tdonmouseover="pauseslide();"onmouseout="inislide();"align="center">
</td>
</tr>
</tbody>
</table>
<tablewidth="100%"align="center"cellspacing="0"onmouseover="pauseslide()"onmouseout="inislide()">
<!--//fixedbyAmourGUO,051017-->
<tbody>
<tr>
<tdwidth="23"><imgstyle="cursor:pointer"onclick="PrevPic();pauseslide();inislide()"height="19"
alt="上一张"src="images/gw_news_img_05.gif"width="23"/></td>
<tdclass="td-3"style="text-align:centercolor:
分享到：
| ASP.NET 2.0中GridView无限层复杂表头的实 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript原生脚本实现幻灯片效果

    JavaScript原生脚本实现幻灯片效果是一种常见的网页动态效果，尤其在网站的首页或产品展示部分广泛应用。这种效果能够以优雅的方式展示一系列图片或内容，通过点击分页按钮进行切换，增强用户体验。下面我们将详细...

    几种好看的幻灯片JS效果

    综上所述，JS幻灯片效果的实现涉及了前端开发的多个方面，包括DOM操作、事件处理、CSS动画、响应式设计以及用户体验优化。熟练掌握这些知识点，不仅可以提升网站的视觉吸引力，还能提高用户的互动性与满意度。

    js创建幻灯片效果

    我们的目标是创建一个幻灯片效果，要求易于维护，同时允许未来的开发者在不改动JavaScript代码的情况下调整图片、样式或文本。幻灯片效果应具备以下特点： 1. **无JavaScript状态下的可用性**：即使用户禁用了...

    一个很好用的JS幻灯片效果

    通过理解和实践这些概念，你可以创建出一个既实用又美观的JavaScript幻灯片效果，适用于各种网页项目。这个压缩包中的文件可能包含示例代码和资源，可以作为学习和研究的基础。通过深入研究这些文件，你可以更深入地...

    一个漂亮的js幻灯片效果 jquery 幻灯片

    本教程将探讨如何利用 jQuery 实现一个漂亮的幻灯片效果，这通常用于网站的首页或者产品展示区域，以吸引用户注意力并提供信息。 首先，我们要了解jQuery库。jQuery是一个轻量级的JavaScript库，它简化了HTML文档...

    15个js幻灯片和flash幻灯片效果

    本资源集包含了15个不同的JavaScript和Flash制作的幻灯片效果，它们能够为网站增添视觉吸引力，尤其适用于广告展示。下面我们将详细探讨这些技术及其在网页设计中的应用。 首先，JavaScript（JS）是一种轻量级的...

    js事例幻灯片效果

    综上所述，"js事例幻灯片效果"是一个集JavaScript编程、DOM操作、事件处理、CSS样式、资源管理及动画效果于一体的网页交互设计。通过学习和实践此类效果，开发者可以提升网页的用户体验，增强网页的吸引力。

    一个不错的JS幻灯片网页特效

    在网页设计中，JavaScript（JS）常常被用来创建动态、交互性强的用户体验，其中幻灯片效果就是一个典型的例子。"一个不错的JS幻灯片网页特效"这个标题表明我们将探讨一种利用JavaScript实现的幻灯片展示功能，它能够...

    javascript幻灯片效果

    JavaScript幻灯片效果是一种常见的网页动态展示技术，用于在网页上创建吸引人的图像或内容轮播。这种效果常被用于网站的首页、产品展示、新闻滚动等场景，以吸引用户的注意力并提供信息浏览的便捷性。JavaScript幻灯...

    js实用的幻灯片效果

    至此，一个基本的JavaScript幻灯片效果已经实现。你可以根据需求进一步优化，比如添加箭头指示当前幻灯片的位置、支持触屏滑动切换、添加淡入淡出效果等。记住，实践是最好的老师，动手尝试并不断调整代码，你将能够...

    三个JS幻灯片效果

    这里我们关注的是“三个JS幻灯片效果”，这些效果是通过JavaScript编程语言实现的，可以从网络上搜集的JS代码进行学习和参考。 首先，我们要理解JavaScript在幻灯片中的作用。JavaScript是一种客户端脚本语言，它...

    flash 幻灯片效果

    Flash幻灯片效果的核心是ActionScript，它是Flash平台上的脚本语言，允许开发者编写控制动画、交互逻辑和数据处理的代码。通过ActionScript，我们可以实现图片的自动循环播放、过渡效果、用户交互控制（如点击按钮...

    JavaScript 4屏平滑滚动幻灯片效果

    JavaScript 4屏平滑滚动幻灯片效果是一种常见的前端页面动态展示技术，广泛应用于网站大图轮播或者信息展示。这种效果通过JavaScript编程语言实现，为用户提供流畅的视觉体验，通常包括自动切换、手动控制、过渡动画...

    javascript图片幻灯片效果显示

    在网页设计中，动态效果是吸引用户注意力的重要手段之一，其中图片幻灯片效果就是一种常见且实用的设计。本文将详细介绍如何使用JavaScript实现这一效果，包括核心原理、关键代码以及实际应用。 首先，图片幻灯片...

    很不错的js图片幻灯片效果

    本资源提供了一种“很不错的js图片幻灯片效果”，它能够以优雅的方式展示一组图片，用户可以轻松浏览，无需手动点击每一张图片。这种幻灯片效果适用于产品展示、摄影集、新闻轮播等多种场景。 【描述】：“不错的js...

    js+flash实现3D幻灯片广告效果

    在这个项目中，"js+flash实现3D幻灯片广告效果"主要是通过JavaScript与Flash的协同工作，打造一个3D旋转的幻灯片展示。JavaScript可能被用来处理用户的交互事件，如点击按钮切换幻灯片，或者滑动鼠标来改变视角。...

    JS幻灯片源代码

    本资源提供的"JS幻灯片源代码"是一个利用JavaScript实现的幻灯片展示系统，适用于网站中产品展示、图片轮播或信息滑动效果。 首先，`readme.htm`通常是项目中的说明文档，它可能包含了如何使用这个幻灯片源代码的...

    幻灯片使用js制作的

    **幻灯片效果**是网页设计中常见的元素，主要用于展示一系列图像、文本或视频，以吸引用户注意力并提供动态的视觉体验。在这个项目中，我们使用JavaScript编程语言来实现这一功能，这是一种轻量级的客户端脚本语言，...

    Js 实现的幻灯片效果 兼容 IE FF

    在本案例中，我们讨论的是使用JavaScript实现的幻灯片效果，这种效果旨在为用户提供一种优雅的方式来展示一系列图片或内容，同时保持界面的简洁和吸引力。幻灯片通常会在网页上自动循环播放一组元素，比如图片、文本...

    javascript 幻灯片

    JavaScript库如jQuery、Bootstrap Carousel或者自定义的滑动插件都可能被用在这里，它们提供了方便的API和方法来创建复杂的幻灯片效果。 在JavaScript幻灯片的实现中，关键知识点包括： 1. **DOM操作**：通过...

Magicbox
Global site tag (gtag.js) - Google Analytics