一个JavaScript实现的幻灯片程序分析

Javascript文件

 

/*
inlineSlides 
Slideshow example of Chapter 6 of
"Beginning JavaScript with DOM Scripting and AJAX" 
by Christian Heilmann
(c) Christian Heilmann and Apress
*/
inlineSlides  =  {

     //  CSS classes
    slideClass:  ' slides ' ,
    dynamicSlideClass:  ' dynslides ' ,
    showClass:  ' show ' ,
    slideCounterClass:  ' slidecounter ' ,
    hideLinkClass:  ' hide ' ,
     //  labels 
     //  forwards and backwards links, you can use any HTML here
    forwardsLabel:  ' <img src="control_fastforward_blue.png" alt="next" /> ' ,
    backwardsLabel:  ' <img src="control_rewind_blue.png" alt="previous" /> ' ,
     //  Counter text, # will be replaced by the current image count
     //  and % by the number of all pictures
    counterLabel:  ' # of % ' ,

    init:  function  () {
         if  ( ! document.getElementById  ||   ! document.createTextNode) {  return ; }
         var  uls  =  document.getElementsByTagName( ' ul ' );
         for  ( var  i  =   0 ; i  <  uls.length; i ++ ) {
             if  ( ! DOMhelp.cssjs( ' check ' , uls[i], inlineSlides.slideClass)) {  continue ; }
            DOMhelp.cssjs( ' swap ' , uls[i], inlineSlides.slideClass, inlineSlides.dynamicSlideClass);
            uls[i].currentSlide  =   0 ;
            inlineSlides.initSlideShow(uls[i]);          //  show current <ul> element as slide show
        }
    },
    initSlideShow:  function  (o) {    //  o should be <ul> element
         var  p, temp, count;
        p  =  document.createElement( ' p ' );
        DOMhelp.cssjs( ' add ' , p, inlineSlides.slideCounterClass);  //  set the class name of <p> element to slidecounter
        o.parentNode.insertBefore(p, o.nextSibling);              //  inert the <p> element before the next sibling of current <ul> element;

        o.rew  =  DOMhelp.createLink( ' # ' ,  '   ' );                     //  create the backward link,
        o.rew.innerHTML  =  inlineSlides.backwardsLabel;            //  and set the innerHTML to correct <img> element;
        DOMhelp.addEvent(o.rew,  ' click ' , inlineSlides.showSlide,  false );    // set the backward link click event handler to showSlide;
        DOMhelp.cssjs( ' add ' , o.rew, inlineSlides.hideLinkClass);  //  set the backward link as hide;
        p.appendChild(o.rew);

         //  create the <span> element to hold the '0 of 7' text;
        o.count  =  document.createElement( ' span ' );                
        temp  =  inlineSlides.counterLabel.replace( / # / , o.currentSlide  +   1 );
        temp  =  temp.replace( / % / , o.getElementsByTagName( ' li ' ).length);
        o.count.appendChild(document.createTextNode(temp));
        p.appendChild(o.count);

         //  create the forward link, similar as the backward link creation
        o.fwd  =  DOMhelp.createLink( ' # ' ,  '   ' );                    
        o.fwd.innerHTML  =  inlineSlides.forwardsLabel;
        DOMhelp.addEvent(o.fwd,  ' click ' , inlineSlides.showSlide,  false );
        p.appendChild(o.fwd);

         //  get the current slide and show its image;
        temp  =  o.getElementsByTagName( ' li ' )[o.currentSlide];
        DOMhelp.cssjs( ' add ' , temp, inlineSlides.showClass);
        o.fwd.onclick  =  DOMhelp.safariClickFix;
        o.rew.onclick  =  DOMhelp.safariClickFix;
    },
    showSlide:  function  (e) {
         var  action;
         var  t  =  DOMhelp.getTarget(e);
         //  get the <a> element where the click happens;
         while  (t.nodeName.toLowerCase()  !=   ' a '
                 &&  t.nodeName.toLowerCase()  !=   ' body ' ) {
            t  =  t.parentNode;
        }
         //  get the previous closest sibling, if not existing, return 
         var  parentList  =  DOMhelp.closestSibling(t.parentNode,  - 1 );  /* t is <a>, t.parentNode is <p>, so parentList is the <ul> element that the root element of the slide show */
         var  count  =  parentList.currentSlide;
         var  photoCount  =  parentList.getElementsByTagName( ' li ' ).length  -   1 ;
         var  photo  =  parentList.getElementsByTagName( ' li ' )[count];
        DOMhelp.cssjs( ' remove ' , photo, inlineSlides.showClass);  //  remove the 'show' class from currentslide; 

        count  =  (t  ==  parentList.fwd)  ?  count  +   1  : count  -   1 ;   //  forward or backward;
        action  =  (count  >   0 )  ?   ' remove '  :  ' add ' ;
        DOMhelp.cssjs(action, parentList.rew, inlineSlides.hideLinkClass);  //  show/hide the backward link

        action  =  (count  <  photoCount)  ?   ' remove '  :  ' add ' ;
        DOMhelp.cssjs(action, parentList.fwd, inlineSlides.hideLinkClass);  //  show/hide the forward link

         var  counterText  =  parentList.count.firstChild
        counterText.nodeValue  =  counterText.nodeValue.replace( / \d / , count  +   1 );
        parentList.currentSlide  =  count;
        photo  =  parentList.getElementsByTagName( ' li ' )[count];
        DOMhelp.cssjs( ' add ' , photo, inlineSlides.showClass);     //  show the new image;
        DOMhelp.cancelClick(e);
    }
}
DOMhelp.addEvent(window,  ' load ' , inlineSlides.init,  false );

 

 

CSS 文件

 

* {
    margin : 0 ;
    padding : 0 ;
}
body {
    font-family : Arial,Sans-Serif ;
    color : #666 ;
    padding : 2em ;
    background : #fff ;
}
h1 {
    font-size : 1em ;
    padding : .5em 0
}

/*  Non - JavaScript  */
.slides, .slides li {
    margin : 0 ;
    padding : 5px ;
    list-style : none ;
}
.slides img {
    display : block ;
}
.slides {
    background : #ccc ;
    width : 440px ;
    float : left ;
}
.slides li {
    float : left ;
}
/*  JavaScript  */
.dynslides {
    margin : 0 ;
    padding : 0 ;
    width : 210px ;
    border : 1px solid #000 ;
    background : #eee ;
}
.dynslides li {
    display : none ;            /* do not display all <li> element */
    margin : 0 ;
    padding : 2px ;
}
.dynslides img {
     display : block ;
}
.dynslides li.show {       /* revoke the effect of '.dynslides li' selector */
    display : block ;
}
.hide {                    /* when showing first image, hide the backword image; when showing the last image, hide the forward image */
    visibility : hidden ;
}
p.slidecounter {
    color : #333 ;
    background : url(gradient.gif) bottom left repeat-x #fff ;
    font-family : arial,sans-serif ;
    font-size : .8em ;
    margin : 0 0 .5em 0 ;
    width : 210px ;
    border : 1px solid #000 ;
    border-top : none ;
    text-align : center ;
}
p.slidecounter a img {
    border : none ;
    vertical-align : bottom ;
}
p.slidecounter a {
    text-decoration : none ;
    color : #000 ;
}
p.slidecounter span {
    padding : 0 5em ;
}