JS技术

Javascript创建幻灯片特效_Javascript教程(3)

字号+ 作者:H5之家 来源:H5之家 2015-09-17 17:18 我要评论( )

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

 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: },

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • JavaScript入门教程(二)_javascript教程教程

    JavaScript入门教程(二)_javascript教程教程

    2015-10-10 14:25

  • JavaScript入门教程(五)_javascript教程教程

    JavaScript入门教程(五)_javascript教程教程

    2015-10-10 14:21

  • JavaScript入门教程(四)_javascript教程教程

    JavaScript入门教程(四)_javascript教程教程

    2015-10-10 14:19

  • JavaScript入门教程(三)_javascript教程教程

    JavaScript入门教程(三)_javascript教程教程

    2015-10-10 14:17

网友点评