一个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;
}