使用 JavaScript 创建可维护的幻灯片效果代码第1

      2020-09-16 16:52      编程语言
显然,效果很实用。对于这个效果,我们并不解释如何去使用效果库,而是讲解如何创建类似的效果,并保持他的可用性,分离式(unobtrusive),可维护性(让未来的维护者,在不需要修改你的脚本的情况下,修改图片,外观或文本标签)。第一步:分析问题(Analizingtheproblem)
创建一个好的脚本,第一步应该是去分析哪些是你要完成的:我们想要创建一个照片的幻灯片效果,并且我们想要保持维护的方便。

如何创建一个幻灯片效果

在一个网站上拥有幻灯片有几种方法:

在文档中包含所有的图片。
当他运行在无JavaScript状态,这是一个安全的选择。而且,当页面被载完,所有的图片也会将被载完。然而,这个方式只适用于少量的图片。

在文档中包含第一张图片,并且有一个创建幻灯片功能的服务器端脚本。
这也是相当安全的,但是对于终端用户来说,这是非常令人厌烦的——因为我不想加载整个页面,仅想得到下一张照片。但对页面展示和广告点击比较有效,这也是为什么大量的新闻站点使用这个方法。

在文档中包含第一张图片,并按需加载其他图片。
这个方法令你厌烦的是,必须依赖于JavaScript,并且要有一个维护照片列表的JavaScript数组。你还需提供一个加载指示器,用来显示用户一些正在发生的事情。

在我们的案例中,我们采取下面的图片列表,用向前和向后的按钮把他变成一个幻灯片效果,并且一个指示器告诉我们,照片总数中的哪张照片是当前显示的。


<ulid="slideshow">
<li><imgsrc="img/flat1.jpg"alt="Hallway"/></li>
<li><imgsrc="img/flat2.jpg"alt="Hob"/></li>
<li><imgsrc="img/flat3.jpg"alt="Bathroom"/></li>
<li><imgsrc="img/flat4.jpg"alt="LivingRoom"/></li>
<li><imgsrc="img/flat5.jpg"alt="Bedroom"/></li>
</ul>
最后的输出会看起来像例子中的幻灯片效果。

依赖关系检查

我们这里有一些元素依赖于JavaScript生成:文字指示器和向前和向下的链接。为了保持我们解决方法的可用性,我们需要确保一些事情:

仅当JavaScript可用(用户信赖我们提供给他们使用的功能)时,这些元素应该出现。一个链接,不能做任何违反用户对我们的信任的事情。
不论输入设备(让我们不要依赖用户是否有鼠标),交互式元素都应该可用。
图片不应该被隐藏,除非使用者能再次访问他们。在技术上,仅显示第一张图片,且没有向前和向后的链接是预留退路的做法,但是为什么要用户已下载所有的图片仅只看到第一张?
第二步:规划脚本(PlanningtheScript)
一旦你已经评估了问题,并挑选出你想使用的解决方法,你便可以开始规划脚本。本质上,我们的脚本应该做这些:

检查幻灯片列表是否存在,并且包含一些图片(有理由为一张图片创建一个幻灯片效果吗?)。
隐藏所有的照片,但不是第一个。
创建向前和向后的链接,和一个显示我们在哪的指示器。
添加事件处理程序,使链接增加或减少当前显示的图片编号。
确保幻灯片效果没有超出范围,当图片编号小于0,他应该变为最后一张图片,反过来类似。
不同的功能处理

我们有一些方法处理这个问题。其中之一是使用DOM遍历每个LI条目并隐藏他。在这个事件监听函数,我们先隐藏先前显示的LI(如果有的话),并显示当前的这个。

注:显示和隐藏代替图片的LI更有意义,因为他允许维护者在每个幻灯片上添加其他的元素,比如,一些标题。

这个方法的问题在于,我们在JavaScript中做必要的样式改变,这意味着如果有需要比刚才我们脚本中改变display从block到none更复杂的样式改变,将使脚本变得更杂乱(没有从行为中分离表现)。

样式留给CSS解析器

更简洁的方法是将所有的外观改变(在所有列表项下载完之后隐藏某些)都留给浏览器的CSS解析器。在我们的例子中,我们可以在幻灯片中使用一个CSS规则很容易地隐藏所有的列表项,并用一个特定的class重写当前条目的样式。

HTML:


<ulid="slideshow">
<li><imgsrc="img/flat1.jpg"alt="Hallway"/></li>
<li><imgsrc="img/flat2.jpg"alt="Hob"/></li>
<li><imgsrc="img/flat3.jpg"alt="Bathroom"/></li>
<li><imgsrc="img/flat4.jpg"alt="LivingRoom"/></li>
<li><imgsrc="img/flat5.jpg"alt="Bedroom"/></li>
</ul>
CSS:


#slideshowli{
display:none;
}
#slideshowli.current{
display:block;
}
唯一的问题是,如果我们使CSS和JavaScript不可用,访客将永远不能访问到其他图片。因此,我们需要仅当JavaScript可用时,应用这些样式。技巧是,当JavaScript可用,在幻灯片的UL上应用class,例如名为js。这允许我们仅当JavaScript可用时,显示效果,通过在CSS中简单的修改:

CSS:


#slideshow.jsli{
display:none;
}
#slideshow.jsli.current{
display:block;
}
这个class的钩子(hook)也能被用来对幻灯片的静态和动态版本提供一个完全不同的外观。

我们所有的脚本需要做的是,通过移除或添加current的class来显示和隐藏当前及以前的照片。

为了确保我们的脚本将不会影响同一页面上的其他脚本,我们将创建一个主要的对象,并在其上构造所有的方法和属性。这可以确保我们的init()函数将不会被覆盖或覆盖其他任何相同名字的函数。

JavaScript:


slideshow={
current:0,//当前幻灯片编码
init:function(){
//初始化和设置事件处理函数
},
show:function(e){
//事件监听器
}
}
第三步、基本的工具方法(EssentialTools)
现在,我们有了规划和建立我们脚本的框架。是时候思考我们需要完成这个功能的一些工具方法。在其最低要求的情况下,DOM脚本的帮助库应该包括:

一个注册事件处理函数的方法,我们目前将使用JohnResig的addEvent()方法。
添加和移除CSS样式名的方法。
一个覆盖HTML元素默认行为的方法。我们不希望出现链接的目标页,而仅是执行脚本。
我们添加这些工具方法到主要的对象上,并准备开始:

JavaScript:


slideshow={
current:0,//当前幻灯片编码
init:function(){
//初始化和设置事件处理函数
},
show:function(e){
//事件监听器
},
addEvent:function(obj,type,fn){
if(obj.attachEvent){
obj['e'+type+fn]=fn;
obj[type+fn]=function(){
obj['e'+type+fn](window.event);
}
obj.attachEvent('on'+type,obj[type+fn]);
}else
obj.addEventListener(type,fn,false);
},
removeClass:function(o,c){
varrep=o.className.match('‘+c)?'‘+c:c;
o.className=o.className.replace(rep,”);
},
addClass:function(o,c){
vartest=newRegExp(”(^|\\s)”+c+”(\\s|$)”).test(o.className);
if(!test){o.className+=o.className?'‘+c:c;}
},
cancelClick:function(e){
if(window.event){
window.event.cancelBubble=true;
window.event.returnValue=false;
}
if(e&&e.stopPropagation&&e.preventDefault){
e.stopPropagation();
e.preventDefault();
}
}
}
当文档完全载完,第一件事情就是需要执行init()方法:
123下一页阅读全文