Slideshow v1

1
Slideshow v1
ltPgtltIMG SRC"../../images/roster/clarke.jpg"
NAME"myPicture"gtlt/Pgt ltPgt ltA HREF
onClickprocessPrevious()return
falsegtPreviouslt/Agt nbspnbsp ltA HREF
onClickprocessNext()return falsegtNextlt/Agt lt/Pgt
This code is in the ltBODYgt section
NOTE An alternate way to trigger the function
calls is to use the HREF link mechanism ltA
HREFjavascriptprocessPrevious()gtPreviouslt/Agt
nbspnbsp ltA HREFjavascriptprocessNext()gtNext
lt/Agt
Can you think of other ways to trigger the
slide show?
2
Slideshow v1
Try it
var myPix new Array("../../images/roster/clarke.
jpg","../../images/roster/crittenden.jpg", "../../
images/roster/ford.jpg","../../images/roster/golds
berry.jpg","../../images/roster/tran.jpg, ../../
images/roster/williams.jpg) var thisPic
0 function processPrevious() if (thisPic gt
0) thisPic thisPic-1 // NOTE a
shortcut for this common task is thisPic--
myPicture.srcmyPixthisPic function
processNext() if (thisPic lt 5)
thisPicthisPic1 myPicture.srcmyPixthisPi
c
This code is in the ltHEADgt section.
Can we do better than this?
3
Slideshow v2
Try it
Can we make the slide show wrap around?
function processPrevious() if (thisPic gt 0)
thisPicthisPic-1 else
thisPicmyPix.length-1 myPicture.srcmyPix
thisPic
function processNext() if (thisPic lt
(myPix.length-1)) thisPicthisPic1
else thisPic0
myPicture.srcmyPixthisPic
4
Slideshow v3
Can we make text change dynamically too?
var myPix new Array("../../images/roster/clarke.
jpg","../../images/roster/crittenden.jpg", "../../
images/roster/ford.jpg","../../images/roster/golds
berry.jpg","../../images/roster/tran.jpg, ../../
images/roster/williams.jpg) var myCaptions new
Array(Andrea Clarke,Mike Crittenden,D.J.
Ford,J.P. Goldsberry,Huong Tran,Chris
Williams) var thisPic 0 ltPgtltIMG
SRC"../../images/roster/clarke.jpg"
NAME"myPicture"gtlt/Pgt ltPgtltEMgtltSPAN
ID"studentName"gtAndrea Clarkelt/SPANgtlt/EMgtlt/Pgt ltPgt
ltA HREFjavascriptprocessPrevious()gtPreviouslt/Agt
nbspnbsp ltA HREFjavascriptprocessNext()gtNex
tlt/Agt lt/Pgt
5
Slideshow v3
Try it
function processPrevious() if (thisPic gt 0)
thisPicthisPic-1 else
thisPicmyPix.length-1 myPicture.srcmyPix
thisPic studentName.innerHTMLmyCaptionsthis
Pic
6
Slideshow v4
Try it
Can we get rid of the annoying array data?
ltscript language"JavaScript" src"data.js"gtlt/scri
ptgt
Added before existing script
Contents of data.js
var myPix new Array("../../images/roster/clarke.
jpg", "../../images/roster/crittenden.jpg", "../..
/images/roster/ford.jpg", "../../images/roster/gol
dsberry.jpg", "../../images/roster/tran.jpg, ../
../images/roster/williams.jpg) var myCaptions
new Array(Andrea Clarke,Mike Crittenden,D.J.
Ford,J.P. Goldsberry,Huong Tran,Chris
Williams)
7
Slideshow v5
Try it
Can we make it run without interaction?
function processNext() if (thisPic lt
(myPix.length-1)) thisPicthisPic1
else thisPic0
myPicture.srcmyPixthisPic
studentName.innerHTMLmyCaptionsthisPic
setTimeout("processNext()",3000)
In the header
ltscript language"JavaScript"gt setTimeout("process
Next()",3000) lt/scriptgt
Where the links used to be (Could also do this
with an onLoad event handler in the body tag)
Any other variations to try?