JavaScript创建可维护幻灯片效果(2)
作者:blank 来源:蓝色理想 发布时间:2008-06-21 16:42:00
第二步:规划脚本(Planning the Script)
一旦你已经评估了问题,并挑选出你想使用的解决方法,你便可以开始规划脚本。本质上,我们的脚本应该做这些:
检查幻灯片列表是否存在,并且包含一些图片(有理由为一张图片创建一个幻灯片效果吗?)。
隐藏所有的照片,但不是第一个。
创建向前和向后的链接,和一个显示我们在哪的指示器。
添加事件处理程序,使链接增加或减少当前显示的图片编号。
确保幻灯片效果没有超出范围,当图片编号小于 0 ,他应该变为最后一张图片,反过来类似。
不同的功能处理
我们有一些方法处理这个问题。其中之一是使用 DOM 遍历每个 LI 条目并隐藏他。在这个事件监听函数,我们先隐藏先前显示的 LI (如果有的话),并显示当前的这个。
注:显示和隐藏代替图片的 LI 更有意义,因为他允许维护者在每个幻灯片上添加其他的元素,比如,一些标题。
这个方法的问题在于,我们在 JavaScript 中做必要的样式改变,这意味着如果有需要比刚才我们脚本中改变 display 从 block 到 none 更复杂的样式改变,将使脚本变得更杂乱(没有从行为中分离表现)。
样式留给 CSS 解析器
更简洁的方法是将所有的外观改变(在所有列表项下载完之后隐藏某些)都留给浏览器的 CSS 解析器。在我们的例子中,我们可以在幻灯片中使用一个 CSS 规则很容易地隐藏所有的列表项,并用一个特定的 class 重写当前条目的样式。
HTML:
<ul id="slideshow">
<li><img src="img/flat1.jpg" alt="Hallway" /></li>
<li><img src="img/flat2.jpg" alt="Hob" /></li>
<li><img src="img/flat3.jpg" alt="Bathroom" /></li>
<li><img src="img/flat4.jpg" alt="Living Room" /></li>
<li><img src="img/flat5.jpg" alt="Bedroom" /></li>
</ul>
CSS:
#slideshow li{
display:none;
}
#slideshow li.current{
display:block;
}
唯一的问题是,如果我们使 CSS 和 JavaScript 不可用,访客将永远不能访问到其他图片。因此,我们需要仅当 JavaScript 可用时,应用这些样式。技巧是,当 JavaScript 可用,在幻灯片的 UL 上应用 class ,例如名为 js 。这允许我们仅当 JavaScript 可用时,显示效果,通过在 CSS 中简单的修改:
CSS:
#slideshow.js li{
display:none;
}
#slideshow.js li.current{
display:block;
}
这个 class 的钩子(hook)也能被用来对幻灯片的静态和动态版本提供一个完全不同的外观。
我们所有的脚本需要做的是,通过移除或添加 current 的 class 来显示和隐藏当前及以前的照片。
为了确保我们的脚本将不会影响同一页面上的其他脚本,我们将创建一个主要的对象,并在其上构造所有的方法和属性。这可以确保我们的 init() 函数将不会被覆盖或覆盖其他任何相同名字的函数。
JavaScript::
slideshow = {
current:0, // 当前幻灯片编码
init:function(){
// 初始化和设置事件处理函数
},
show:function(e){
// 事件 *
}
}
猜你喜欢
- 服务器重新启动的情况当mysqld启动时,所有的授权表内容被读进存储器并且从那时开始生效。被服务器立即应用的情况用GRANT、REVOKE或
- 向数据库加入字符类型的数据时,我老爱写错数据中含有单引号的语句而导致操作失败像:正确的SQL语句:INSERT baby 
- 如果你已经理解了block formatting contexts那么请继续,否则请先看看这篇文章。Overflow能够做一些很牛掰的事情,
- this指针是面向对象程序设计中的一项重要概念,它表示当前运行的对象。在实现对象的方法时,可以使用this指针来获得该对象自身的引用。和其他
- MySQL支持的两种主要表存储格式MyISAM,InnoDB,上个月做个项目时,先使用了InnoDB,结果速度特别慢,1秒钟只能插入10几条
- 我们在开发过程中,经常遇到这样问题,就是要求定期进行数据库的检查,如果发现特定数据,那么就要进行某项操作,这个需求呢,有两种做法,一是利用W
- 第一题:ASP中,VBScript的唯一的数据类型是什么?第二题:在ASP中,VBScript有多种控制程序流程语句,如If…Then, S
- 使用MySQL,安全问题不能不注意。以下是MySQL提示的23个注意事项:1。如果客户端和服务器端的连接需要跨越并通过不可信任的网络,那么就
- 许多人在编写程序的时候因为贪图方便或不小心使用到程式的保留字,有时明明程序没有错,就是无法正确执行。您知道有哪些常见的保留字吗? 下面的都是
- 了兑现我对大家的承诺,我们现在立即就将“借助数据库和ASP程序”编写出来的,可以同时适用于IIS和P
- 如何让页面超时并指定一个超时时间?下面就是利用缓冲的程序页面事例: <%@ OutputCache Du
- 恭喜您,您中奖了,你的中奖码是(请牢记,领奖需要):XXXXXXXXXXX然后用户输入XXXXXXXXXXX,简单验证后就可以领奖了。你使用
- ChatGPT 是 OpenAI 开发的 GPT(Generative Pre-trained Transformer)语言模型的变体。它是
- 代码如下: Function NumberSplit(num) Dim i,length length=Len(num) For i=1 T
- 今天有个学生问我:页面中使用GIF格式,失真太大,怎么办呢?这个问题比较简单啊,只要用JPG就可以了。我们常用的页面的图片格式有三种,GIF
- LOAD DATA INFILE '文件地址' INTO TABLE 表名 FIELDS TERMINATED BY
- 内容摘要:本文介绍了使用asp来JMail v4.3发信的大部分常用方法,包括邮件基本信息、身份验证、附件等。无需很多的修改就可以
- -crop参数是从一个图片截取一个指定区域的子图片.格式如下:convert -crop widthxheight{+-
- 本文介绍了用ASP的AdoDb.Stream读取/写入UTF-8编码格式的文件的方法:函数名称:ReadTextFile 作用:利用AdoD
- 设计页面时,经常会从一个页面打开一个子窗口以供浏览者查看。通常,这种子窗口中的内容一经浏览者看过,对于浏览者而言就不再需要,而他们常常会忘记