JavaScript创建可维护幻灯片效果
作者:blank 来源:蓝色理想 发布时间:2008-06-21 16:42:00
显然,效果很实用。对于这个效果,我们并不解释如何去使用效果库,而是讲解如何创建类似的效果,并保持他的可用性,分离式(unobtrusive),可维护性(让未来的维护者,在不需要修改你的脚本的情况下,修改图片,外观或文本标签)。
查看幻灯片效果
无 JavaScript 状态下,用户将看到下面的效果:
添加和移除图片、改变图片的顺序以及添加标题,这些在 HTML 中都很容易做到。并且最后的解决并不意味着维护者需要懂任何 JavaScript 或者在源码中搜索在哪里修改 CSS 的 class, id 或者文本标签。
你有没有准备好花费一些时间去一步一步的尝试创建这个效果?
第一步:分析问题(Analizing the problem)
创建一个好的脚本,第一步应该是去分析哪些是你要完成的:我们想要创建一个照片的幻灯片效果,并且我们想要保持维护的方便。
如何创建一个幻灯片效果
在一个网站上拥有幻灯片有几种方法:
在文档中包含所有的图片。
当他运行在无 JavaScript 状态,这是一个安全的选择。而且,当页面被载完,所有的图片也会将被载完。然而,这个方式只适用于少量的图片。在文档中包含第一张图片,并且有一个创建幻灯片功能的服务器端脚本。
这也是相当安全的,但是对于终端用户来说,这是非常令人厌烦的——因为我不想加载整个页面,仅想得到下一张照片。但对页面展示和广告点击比较有效,这也是为什么大量的新闻站点使用这个方法。在文档中包含第一张图片,并按需加载其他图片。
这个方法令你厌烦的是,必须依赖于 JavaScript ,并且要有一个维护照片列表的 JavaScript 数组。你还需提供一个加载指示器,用来显示用户一些正在发生的事情。
在我们的案例中,我们采取下面的图片列表,用向前和向后的按钮把他变成一个幻灯片效果,并且一个指示器告诉我们,照片总数中的哪张照片是当前显示的。
<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>
最后的输出会看起来像例子中的幻灯片效果。
依赖关系检查
我们这里有一些元素依赖于 JavaScript 生成:文字指示器和向前和向下的链接。为了保持我们解决方法的可用性,我们需要确保一些事情:
仅当 JavaScript 可用(用户信赖我们提供给他们使用的功能)时,这些元素应该出现。一个链接,不能做任何违反用户对我们的信任的事情。
不论输入设备(让我们不要依赖用户是否有鼠标),交互式元素都应该可用。
图片不应该被隐藏,除非使用者能再次访问他们。在技术上,仅显示第一张图片,且没有向前和向后的链接是预留退路的做法,但是为什么要用户已下载所有的图片仅只看到第一张?
猜你喜欢
- 如何修改NT的登录密码? 代码见下:<%Sub ChangeUserPassword(C
- 自动发送邮件我们把报表做出来以后一般都是需要发给别人查看,对于一些每天需要发的报表或者是需要一次发送多份的报表,这个时候可以考虑借助Pyth
- Golang有很多第三方包,其中的 viper 支持读取多种配置文件信息。本文只是做一个小小demo,用来学习入门用的。1、安装go get
- 到目前为止,我已经开发了两个HTML编辑器了,一个用在公司的CMS项目,另一个用在这个Blog(TidyEditor,暂时没有单独发布)。下
- 配置说明Linux系统:CentOS-7.0MySQL版本:5.7.21Linux系统下启动多个MySQL实例,目前知道有两种方法,一种是通
- 问题描述:已有的model,修改之后,想重新建模,于是将migrations文件夹中除__init__.py之外其他文件都删掉,再次执行以下
- 一、Python输出print是python输出的关键字,默认是输出内容后换行。如果不想换行,需要在变量末尾加上 end=&quo
- MySQL8数据库安装一、Windows 环境下安装A、下载 MySQL下载地址Select Operating System:Micros
- vue使用this.$confirm首先在element-ui中的el-table下的el-table-column中引入插槽(相当于占位符
- sklearn生成多项式import numpy as npfrom sklearn.preprocessing import Polyno
- 如下所示:def sub(arr): finish=[] size = len(arr) end = 1 << size #en
- 发现问题在Anaconda配置好虚拟环境后,需要将环境添加进PyCharm中。(或者新建项目时,设置针对某一项目的运行环境),选择Conda
- 本文实例为大家分享了python实现网络五子棋的具体代码,供大家参考,具体内容如下服务器端:import osimport socketim
- Beautiful Soup 库一般被称为bs4库,支持Python3,是我们写爬虫非常好的第三方库。因用起来十分的简便流畅。所以也被人叫做
- 当我们写用例断言时,往往一个断言结果是不够的,所以需要加入多重断言,而多重断言,当断言中间出现断言结果False时,会中断后续的断言执行,会
- 本文实例讲述了python类继承用法。分享给大家供大家参考。具体方法如下:#!/usr/bin/python# Filename: inhe
- 我们今天主要描述的是php和MySQL转义字符,我们大家都知道php和MySQL转义字符的实际应用比例还是占为多数的,如果你对这一技术,心存
- 项目需要,需要自动生成PDF测试报告。经过对比之后,选择使用了reportlab模块。 项目背景:开发一个测试平台,供测试维护测试用例,执行
- 日志文件满而造成SQL数据库无法写入文件时,可用两种方法:一种方法:清空日志。1.打开查询分析器,输入命令DUMP TRANSAC
- 作为入门者来说,了解JavaScript中timer的工作方式是很重要的。通常它们的表现行为并不是那么地直观,而这是因为它们都处在一个单一线