HTML and CSS Reference
In-Depth Information
Finally, let's build the required interaction into our JavaScript:
$
(
function
() {
function
changeSlide
(
newSlide
) {
// cancel any timeout
clearTimeout
(
slideTimeout
);
// change the currSlide value
currSlide
=
newSlide
;
// make sure the currSlide value is not too low or high
if
(
currSlide
>
maxSlide
)
currSlide
=
0
;
else if
(
currSlide
<
0
)
currSlide
=
maxSlide
;
// animate the slide reel
$slideReel
.
animate
({
left
:
currSlide
* -
900
},
400
,
'swing'
,
function
() {
// hide / show the arrows depending on which frame it's on
if
(
currSlide
==
0
)
$slidePrevNav
.
hide
();
else
$slidePrevNav
.
show
();
if
(
currSlide
==
maxSlide
)
$slideNextNav
.
hide
();
else
$slideNexNav
.
show
();
// set new timeout if active
if
(
activeSlideshow
)
slideTimeout
=
setTimeout
(
nextSlide
,
1200
);
});
// animate the navigation indicator
$activeNavItem
.
animate
({
left
:
currSlide
*
150
},
400
,
'swing'
);
}
function
nextSlide
() {
