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 );
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 ;
}
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 ;
}