58 lines
1.7 KiB
JavaScript
58 lines
1.7 KiB
JavaScript
$(document).ready(
|
|
function() {
|
|
var currentPosition = 0;
|
|
var slideWidth = 560;
|
|
var slides = $('.slide');
|
|
var numberOfSlides = slides.length;
|
|
|
|
// Remove scrollbar in JS
|
|
$('#slidesContainer').css('overflow', 'hidden');
|
|
|
|
// Wrap all .slides with #slideInner div
|
|
slides.wrapAll('<div id="slideInner"></div>')
|
|
// Float left to display horizontally, readjust .slides
|
|
// width
|
|
.css({
|
|
'float' : 'left',
|
|
'width' : slideWidth
|
|
});
|
|
|
|
// Set #slideInner width equal to total width of all slides
|
|
$('#slideInner').css('width', slideWidth * numberOfSlides);
|
|
|
|
// Insert controls in the DOM
|
|
$('#slideshow').prepend('<span class="control" id="leftControl">单击向左移动</span>').append('<span class="control" id="rightControl">单击向右移动</span>');
|
|
|
|
// Hide left arrow control on first load
|
|
manageControls(currentPosition);
|
|
|
|
// Create event listeners for .controls clicks
|
|
$('.control').bind(
|
|
'click',
|
|
function() {
|
|
// Determine new position
|
|
currentPosition = ($(this).attr('id') == 'rightControl') ? currentPosition + 1 : currentPosition - 1;
|
|
|
|
// Hide / show controls
|
|
manageControls(currentPosition);
|
|
// Move slideInner using margin-left
|
|
$('#slideInner').animate({'marginLeft' : slideWidth * (-currentPosition)});
|
|
});
|
|
|
|
// manageControls: Hides and Shows controls depending on
|
|
// currentPosition
|
|
function manageControls(position) {
|
|
// Hide left arrow if position is first slide
|
|
if (position == 0) {
|
|
$('#leftControl').hide();
|
|
} else {
|
|
$('#leftControl').show();
|
|
}
|
|
// Hide right arrow if position is last slide
|
|
if (position == numberOfSlides - 1) {
|
|
$('#rightControl').hide();
|
|
} else {
|
|
$('#rightControl').show();
|
|
}
|
|
}
|
|
}); |