javascript幻灯片使用JavaScript创建可维护的幻灯片.pdfVIP

javascript幻灯片:使用 JavaScript 创建可维 护的幻灯片效果代码 疯狂代码 http://CrazyC/ ĵ http:/CrazyC/Javascript/Article44813.html 第步:分析问题(Analizing the problem) 创建个好脚本第步应该是去分析哪些是你要完成:我们想要创建个照片幻灯片效果并且我们想要保持维护方便 如何创建个幻灯片效果 在个网站WebSite上拥有幻灯片有几种思路方法: 在文档中包含所有图片 当他运行在无 JavaScript 状态这是个安全选择而且当页面被载完所有图片也会将被载完然而这个方式只适用于 少量图片 在文档中包含第张图片并且有个创建幻灯片功能服务器端脚本 这也是相当安全但是对于终端用户来说这是非常令人厌烦——我不想加载整个页面仅想得到下张照片但对页面 展示和广告点击比较有效这也是为什么大量新闻站点使用这个思路方法 在文档中包含第张图片并按需加载其他图片 这个思路方法令你厌烦是必须依赖于 JavaScript 并且要有个维护照片列表 JavaScript 你还需提供个加载指示器 用来显示用户些正在发生事情 在我们案例中我们采取下面图片列表用向前和向后按钮把他变成个幻灯片效果并且个指示器告诉我们照片总数 中哪张照片是当前显示 ul id=slideshow liimg src=img/flat1.jpg alt=Hallway //li liimg src=img/flat2.jpg alt=Hob //li liimg src=img/flat3.jpg alt=Bathroom //li liimg src=img/flat4.jpg alt=Living Room //li liimg src=img/flat5.jpg alt=Bedroom //li /ul 最后输出会看起来像例子中幻灯片效果 依赖关系检查 我们这里有些元素依赖于 JavaScript 生成:文字指示器和向前和向下链接为了保持我们解决思路方法可用性我们 需要确保些事情: 仅当 JavaScript 可用(用户信赖我们提供给他们使用功能)时这些元素应该出现个链接不能做任何违反用户对我 们信任事情 不论输入设备(让我们不要依赖用户是否有鼠标)交互式元素都应该可用 图片不应该被隐藏除非使用者能再次访问他们在技术上仅显示第张图片且没有向前和向后链接是预留退路做法 但是为什么要用户已下载所有图片仅只看到第张？ 第 2步:规划脚本(Planning the Script) 旦你已经评估了问题并挑选出你想使用解决思路方法你便可以开始规划脚本本质上我们脚本应该做这些: 检查幻灯片列表是否存在并且包含些图片(有理由为张图片创建个幻灯片效果吗？) 隐藏所有照片但不是第个 创建向前和向后链接和个显示我们在哪指示器 添加事件处理使链接增加或减少当前显示图片编号 确保幻灯片效果没有超出范围当图片编号小于 0 他应该变为最后张图片反过来类似 区别功能处理 我们有些思路方法处理这个问题其中的是使用 DOM 遍历每个 LI 条目并隐藏他在这个事件监听我们先隐藏先前 显示 LI (如果有话)并显示当前这个 注:显示和隐藏代替图片 LI 更有意义他允许维护者在每个幻灯片上添加其他元素比如些标题 这个思路方法问题在于我们在 JavaScript 中做必要样式改变这意味着如果有需要比刚才我们脚本中改变 display 从 block 到 none 更复杂样式改变将使脚本变得更杂乱(没有从行为中分离表现) 样式留给 CSS 解析器 更简洁思路方法是将所有外观改变(在所有列表项下载完的后隐藏某些)都留给浏览器 CSS 解析器在我们例子中 我们可以在幻灯片中使用个 CSS 规则很容易地隐藏所有列表项并用个特定 重写当前条目样式 HTML: ul id=slideshow liimg src=img/flat1.jpg alt=Hallway //li liimg src=img/flat2.jpg alt=Hob //li liimg src=img/flat3.jpg alt=Bathroom //li liimg src=img/flat4.jpg alt=Li