神马文学网手把手教你用JS创建幻灯片特效-手把手教你用JS创建幻灯片特效,学院,创意设计,网页设计-...
来源：百度文库 编辑：神马文学网 时间：2024/05/06 12:44:52
现在，在适当的位置我们有所有的方法工具，以及当窗口载完时被调用的init() ，我们可以开始具体化此方法。
注：这仅是 init() 方法，而不是整个脚本。因为有行号，复制并粘贴脚本将会导致错误。 1: init:function(){2: if(document.getElementById && document.createTextNode){3: var list = document.getElementById(' ');4: if(list){5: slideshow.items = list.getElementsByTagName('li');6: slideshow.all = slideshow.items.length;7: if(slideshow.all > 1){8: slideshow.addClass(list, 'js');9: slideshow.createNav(list);10: }11: }12: slideshow.show();13: }14: },
- 第2行，检测 DOM 是否被支持。
- 第3和4行，尝试检索 ID 为 slideshow 的元素，如果没有被定义则不执行余下的方法。
- 第5和6行，检索列表项及列表项的个数，并分别储存在属性 items 和 all 里。
- 第7行，检测是否超多一个列表项，如果不超多则不执行余下的。
- 第8行，添加 js 样式类名到列表上，从而隐藏列表项和应该不同的样式。
- 第9行，调用 createNav()，并提供这个列表作为参数。
- 第12行，调用 show() 用来显示预定义了 current 属性的滑动门。
createNav()方法使用DOM脚本创建幻灯片正常工作所需的HTML。
1: createNav:function(o){2: var p = document.createElement('p');3: slideshow.addClass(p, 'slidenav');4: slideshow.prev = document.createElement('a');5: slideshow.prev.setAttribute('href', '#');6: var templabel = document.createTextNode('<<');7: slideshow.prev.appendChild(templabel);8: slideshow.addEvent(slideshow.prev, 'click', slideshow.show);9: p.appendChild(slideshow.prev);10: slideshow.count = document.createElement('span');11: templabel = document.createTextNode( (slideshow.current+1) + ' / ' + slideshow.all);12: slideshow.count.appendChild(templabel);13: p.appendChild(slideshow.count);14: slideshow.next = document.createElement('a');15: slideshow.next.setAttribute('href', '#');16: var templabel = document.createTextNode('>>’);17: slideshow.next.appendChild(templabel);18: slideshow.addEvent(slideshow.next, ‘click’, slideshow.show);19: p.appendChild(slideshow.next);20: o.parentNode.insertBefore(p, o);21: },
- 第2和3行，刚开始创建一个 P 元素，用来包含整个幻灯片导航，并应用一个名为 slidenav 的 class。
- 第4和5行，创建一个新的链接元素，储存在叫 prev 的属性中，设置 href 属性为 #。使链接显示为一个真正的链接且键盘可用，是有必要的。
- 第6行，创建一个新的文本标签。
- 第7行，将文本标签添加到链接上。
- 第8行，添加一个事件处理函数，指向 show() 监听方法。
- 第9行，将新的链接添加到 段落上。
- 第10行，开始计数器，我们创建一个 SPAN 元素，并用 count 属性储存他。
- 第11行，创建一个新的文本节点，显示当前幻灯片在总数中的位置。我们需要给当前的属性增加 1，因为人类计数是从 1 开始而非从 0。
- 第12行，将文本作为新的子节点，添加至 SPAN 上 。
- 第13行，将 SPAN 元素 添加到段落上。
- 第14至19行，基本上是复制 4 到 9 行，这次重新创建链接唯一不同的是文本标签，他储存在 next 属性上。
- 第20行，将最近创建的段落插入到文档中初始的图片列表前。
这些被创建的所有标记都是必要的，最后剩下的是去定义一个当链接被点击时调用的监听方法show() 。
1: show:function(e){2: if(this === slideshow.next || this === slideshow.prev){3: slideshow.removeClass(slideshow.items[slideshow.current], ‘current’);4: var addto = (this === slideshow.next) ? 1 : -1;5: slideshow.current = slideshow.current + addto;6: if(slideshow.current < 0){7: slideshow.current = (slideshow.all-1);8: }9: if(slideshow.current > slideshow.all-1){10: slideshow.current = 0;11: }12: }13: var templabel = document.createTextNode((slideshow.current+1) + ‘ / ‘ + slideshow.all);14: slideshow.count.replaceChild(templabel, slideshow.count.firstChild);15: slideshow.addClass(slideshow.items[slideshow.current], ‘current’);16: slideshow.cancelClick(e);17: },
- 第1行，得到作为参数 e 的当前事件对象，这是稍后调用的 cancelClick() 唯一需要。
- 第2行，检测点击的元素是否是向下或者向前链接(this 由 addEvent() 返回)。
- 第3行，从当前显示的幻灯片上移除 current 的 class。由于现在有一个被点击的链接，这将成为可能。
- 第4行，通过比较 this 和 next 属性，决定 current 的计数器是应该增加还是减少。
- 第5行，修正计数器。
- 第6到11行，确定计数器将永远不会超出范围，当你在第一幻灯片并点击了向前的链接，将设置他为最后一个，而当你在最后一个幻灯片，点击了向后的链接，将设置为第一个。
- 第13和14行，生成一个新的计数器文本并替代旧的。
- 第15行，通过设置名为 current 的 class，显示新的当前幻灯片。
- 第16行，通过调用 cancelClick() 阻止链接的默认行为。
这些是脚本的所有内容。现在这个脚本可以工作，但仍不是真正可维护的。