`

经典的图片幻灯

J#JavaScriptCC++C# 
阅读更多

 

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

<html xmlns="http://www.w3.org/1999/xhtml">  

<head>  

<title> 经典的图片幻灯</title>  

<style type="text/css">  

.d1{width:443px;height:auto;overflow:hidden;border:#666666 2px solid;background-color:#000000;position:relative;}  

.loading{width:443px;border:#666666 2px solid;background-color:#000000;color:#FFCC00;font-size:12px;height:179px;text-align:center;padding-top:30px;font-  

 

family:Verdana, Arial, Helvetica, sans-serif;font-weight:bold;}  

.d2{width:100%;height:209px;overflow:hidden;}  

.num_list{position:absolute;width:100%;left:0px;bottom:-1px;background-color:#000000;color:#FFFFFF;font-size:12px;padding:4px  

 

0px;height:20px;overflow:hidden;}  

.num_list span{display:inline-block;height:16px;padding-left:6px;}  

img{border:0px;}  

ul{display:none;}  

.button{position:absolute; z-index:1000; right:0px; bottom:2px; font-size:13px; font-weight:bold; font-family:Arial, Helvetica, sans-serif;}  

.b1,.b2{background-color:#666666;display:block;float:left;padding:2px 6px;margin-right:3px;color:#FFFFFF;text-decoration:none;cursor:pointer;}  

.b2{color:#FFCC33;background-color:#FF6633;}  

</style>  

 

 

<script language="javascript" type="text/javascript">  

var s=function(){  

var interv=2500; //切换间隔时间  

var interv2=15; //切换速速  

var opac1=80; //文字背景的透明度  

var source="fade_focus" //图片容器id  

//获取对象  

function getTag(tag,obj)  

 

{if(obj==null){return document.getElementsByTagName(tag)}  

 

else{return obj.getElementsByTagName(tag)}}  

function getid(id){return document.getElementById(id)};  

var opac=0,j=0,t=63,num,scton=0,timer,timer2,timer3;  

 

var id=getid(source);  

 

id.removeChild(getTag("div",id)[0]);  

 

var li=getTag("li",id);  

 

var div=document.createElement("div");  

 

var title=document.createElement("div");  

 

var span=document.createElement("span");  

 

var button=document.createElement("div");  

 

button.className="button";  

 

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

 

{var a=document.createElement("a");  

 

a.innerHTML=i+1;  

 

a.onclick=function()  

 

{clearTimeout(timer);  

 

clearTimeout(timer2);  

 

clearTimeout(timer3);  

 

j=parseInt(this.innerHTML)-1;  

 

scton=0;  

 

t=63;  

 

opac=0;  

 

fadeon();};  

 

a.className="b1";  

 

a.onmouseover=function(){this.className="b2"};  

 

a.onmouseout=function(){this.className="b1";sc(j)};  

 

button.appendChild(a);}  

// 控制透明度  

function alpha(obj,n)  

 

{if(document.all)  

 

{obj.style.filter="alpha(opacity="+n+")";}  

 

else{obj.style.opacity=(n/100);}}  

//控制焦点按钮  

function sc(n){  

 

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

 

{button.childNodes[i].className="b1"};  

 

button.childNodes[n].className="b2";}  

title.className="num_list";  

 

title.appendChild(span);  

 

alpha(title,opac1);  

 

id.className="d1";  

 

div.className="d2";  

 

id.appendChild(div);  

 

id.appendChild(title);  

 

id.appendChild(button);  

//渐显  

var fadeon=function()  

 

{opac+=5;  

 

div.innerHTML=li[j].innerHTML;  

 

span.innerHTML=getTag("img",li[j])[0].alt;alpha(div,opac);  

 

if(scton==0){sc(j);  

 

num=-2;  

 

scrolltxt();  

 

scton=1};  

 

if(opac<100){timer=setTimeout(fadeon,interv2)}  

 

else{timer2=setTimeout(fadeout,interv);};}  

// 渐隐  

var fadeout=function()  

 

{opac-=5;  

 

div.innerHTML=li[j].innerHTML;  

 

alpha(div,opac);  

 

if(scton==0){num=2;  

 

scrolltxt();  

 

scton=1};  

 

if(opac>0){timer=setTimeout(fadeout,interv2)}  

 

else{if(j<li.length-1){j++}else{j=0};fadeon()};}  

// 滚动文字  

var scrolltxt=function(){  

 

t+=num;  

 

span.style.marginTop=t+"px";  

 

if(num<0&&t>3){timer3=setTimeout(scrolltxt,interv2)}  

 

else if(num>0&&t<62){  

 

timer3=setTimeout(scrolltxt,interv2)}else{scton=0}};  

fadeon();  

}  

// 初始化  

window.onload=s;  

</script>  

</head>  

 

<body>  

<div id="fade_focus">  

<div class="loading">Loading...<br /><img src="C:/Documents and Settings/Administrator/桌面/经典的图片幻灯/loading.gif"></div>  

<ul>  

// 注意你存放图片的链接地址  

<li><img src="C:/Documents and Settings/Administrator/桌面/经典的图片幻灯/1.jpg" width="443" height="209" alt="图片焦点切换第一张文字" /></li>  

<li><img src="C:/Documents and Settings/Administrator/桌面/经典的图片幻灯/2.jpg" width="443" height="209" alt="图片焦点切换第二张文字" /></li>  

<li><img src="C:/Documents and Settings/Administrator/桌面/经典的图片幻灯/3.jpg" width="443" height="209" alt="图片焦点切换第三张文字" /></li>  

<li><img src="C:/Documents and Settings/Administrator/桌面/经典的图片幻灯/4.jpg" width="443" height="209" alt="图片焦点切换第四张文字" /></li>  

<li><img src="C:/Documents and Settings/Administrator/桌面/经典的图片幻灯/5.jpg" width="443" height="209" alt="图片焦点切换第五张文字" /></li>  

</ul>  

</div>  

</body>  

</html>  

分享到：
| Oracle trigger Example
评论
发表评论

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

相关推荐

    ASP 图片 幻灯片

    在ASP技术中，实现图片幻灯片展示是一项常见的需求，它可以帮助网站用户以视觉友好的方式浏览一系列图片。以下是对ASP图片幻灯片实现的详细讲解： 1. **ASP基础**：ASP是基于HTTP协议的，它可以运行在IIS（Internet...

    jquery图片幻灯片

    在网页设计中，jQuery图片幻灯片是一种常见且实用的元素，它能够为网站增添动态效果，提升用户体验。jQuery库的轻量级和强大的API使其成为实现这种功能的理想选择。本篇文章将深入探讨jQuery图片幻灯片的工作原理、...

    js图片幻灯片 jquery幻灯片图片 html幻灯片案例

    JavaScript图片幻灯片是一种在网页上展示图片轮播效果的技术，通常用于网站的首页或产品展示部分，以吸引用户注意力并提高用户体验。jQuery是JavaScript的一个库，它简化了DOM操作、事件处理和动画效果，因此在创建...

    图片幻灯片实例

    在IT领域，图片幻灯片是一种常见的多媒体展示方式，它允许用户以动态的形式展示一系列图片，常用于报告、演示、教学或个人分享等场景。在这个“图片幻灯片实例”中，我们可以深入探讨图片幻灯片的制作、设计原则、...

    图片幻灯片

    在制作网页图片幻灯片效果时，通常会涉及一系列重要的知识点。根据给定文件的内容，以下是一些相关的详细知识点： 1. 基本原理：幻灯片效果的基本原理是通过脚本控制图片的显示与隐藏，以及图片切换的动画效果，...

    经典的图片幻灯2

    标题“经典的图片幻灯2”暗示我们即将探讨的是一个关于创建图片幻灯展示的程序或技术，可能是通过源代码实现的。描述中的“NULL”没有提供额外信息，但我们可以从标签“源码”和“工具”中推断，这个话题可能涉及到...

    C# winform 图片幻灯片方式切换

    总结来说，C# WinForm实现图片幻灯片切换的关键在于合理利用PictureBox控件展示图片，Timer控件控制切换时机，并通过数组存储图片路径来管理图片资源。这个基本的框架可以进一步扩展，以适应更复杂的需求，如添加...

    图片幻灯显示效果web页面源代码

    在网页设计中，图片幻灯显示是一种常见的交互效果，它能以动态的形式展示一组图片，增强用户体验。"图片幻灯显示效果web页面源代码"是一个关于如何使用CSS和JavaScript实现这种效果的示例项目。接下来，我们将深入...

    原创Jquery实现图片幻灯片特效

    【jQuery实现图片幻灯片特效】是一种常见的网页动态效果，用于展示一组图片并自动轮换，为用户带来更丰富的视觉体验。在这个项目中，我们利用jQuery库的强大功能，结合HTML、CSS和JavaScript技术来创建一个自定义的...

    凤凰网网易图片幻灯效果

    标题中的“凤凰网网易图片幻灯效果”指的是在网页设计中常见的图像展示技术，通常用于新闻网站、博客或者产品展示页面，以吸引用户注意力并提供视觉上的动态体验。这种技术通过编程实现图片的自动轮播，结合缩略图和...

    asp.net 图片幻灯片切换

    在这个特定的场景中，我们关注的是如何在ASP.NET中实现图片幻灯片切换的功能。 图片幻灯片切换通常用于网站的首页或者产品展示页面，它可以自动或手动切换展示一系列的图片，为用户提供动态且吸引人的视觉体验。...

    动易经典幻灯片标签

    动易经典幻灯片标签是一种在网页设计中常用的元素，尤其在展示产品或服务时，它能够以动态、吸引人的形式展示多张图片或信息。动易，作为一个知名的中国CMS（内容管理系统）提供商，提供了这样的功能，使得用户无需...

    经典风格新闻图片幻灯片JS特效代码.rar

    经典风格新闻图片幻灯片JS特效代码，下边4张小图片，上边显示大图片，切换时候鼠标轻点缩略图即可。测试注意：请不要直接双击打开html文件，要在WEB服务器环境下测试才行，比如ASP/PHP服务器上，用地址输入测试。

    非常炫的图片幻灯片，javascript+css

    在IT行业中，图片幻灯片是一种常见的网页交互元素，它能以动态且吸引人的形式展示一组图片。"非常炫的图片幻灯片"是利用JavaScript和CSS技术实现的一个功能强大的图片展示工具，它具备类似百度图片预览的效果，提供...

    37种经典的css3图片切换幻灯片效果

    在图片幻灯片中，可以使用`transform`来实现图片的翻转、旋转、缩放等效果，增加视觉吸引力。 四、 opacity 和 visibility 这两个属性在图片切换中起到关键作用。`opacity`可以改变元素的透明度，实现淡入淡出效果...

    Android异步下载网络图片Viewpager实现广告幻灯片

    在这个案例中，我们关注的是如何利用`Android`的`ViewPager`组件和异步加载技术来创建一个自动播放的广告幻灯片，类似于新浪图片画廊的功能。 `ViewPager`是Android SDK中的一个强大控件，它允许用户左右滑动浏览多...

    超漂亮Js+css图片幻灯切换.rar

    超漂亮Js+css图片幻灯切换.rar超漂亮Js+css图片幻灯切换.rar超漂亮Js+css图片幻灯切换.rar超漂亮Js+css图片幻灯切换.rar超漂亮Js+css图片幻灯切换.rar超漂亮Js+css图片幻灯切换.rar

    web页面图片幻灯片播放效果（相册）源码

    网页图片幻灯片播放效果，通常被称为图片轮播或相册功能，是Web开发中一个常见且实用的设计元素。这种效果使得多张图片能够在有限的空间内以动态的方式展示，为用户带来良好的交互体验。在本案例中，"web页面图片...

    html5手机端图片幻灯片放大展示

    在图片幻灯片中，我们通常会设置多个`&lt;img&gt;`标签，并通过JavaScript或CSS来控制它们的显示与隐藏，实现图片的切换效果。例如，可以使用CSS的`display`属性来控制图片的可见性。 接着，为了实现图片的放大功能，我们...

    图片展示-幻灯片效果，qq图片效果（js实现）

    ---图片以幻灯片的风格展示，效果有：a,可以在幻灯片中添加标题。 b,在幻灯片添加超链接实现在不同的幻灯片之间切换。c，产品的展示形式。（类似淘宝）。 d,标准的幻灯片播放形式。 3，仿QQ相册幻灯片 --模仿QQ中...

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