我已经改编了来自Jacob Gube(sixrevisions.com)的jquery幻灯片,并添加了一些代码以使其可以访问键盘。我也试图让它响应。它运作良好而不是一件事:当我更改浏览器的窗口大小时,我必须刷新浏览器才能看到幻灯片的图片正确调整大小。
我试过window.resize但没有成功。
这是我的Jquery代码:
$(document).ready(function () {
var currentPosition = 0;
var slides = $('.slide');
var numberOfSlides = slides.length;
var imgWidth = $('.slide img').width();
$('#carrousel_conteneur').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',
'max-width': imgWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css({ 'width': imgWidth * numberOfSlides, });
// Insert controls in the DOM
$('#carrousel')
.prepend('<input type="submit" class="boutons" id="precedent" value="Image précédente" aria-live="polite" />')
.append('<input type="submit" class="boutons" id="suivant" value="Image suivante" aria-live="polite"/>');
// Hide left arrow control on first load
manageControls(currentPosition);
// Create event listeners for .controles clicks
$('.boutons')
.bind('click', function () {
// Determine new position
currentPosition = ($(this).attr('id') == 'suivant') ? currentPosition + 1 : currentPosition - 1;
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft': imgWidth * (-currentPosition)
});
});
// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position) {
// Hide left arrow if position is first slide
if (position == 0) {
$('#precedent').hide()
} else {
$('#precedent').show()
}
// Hide right arrow if position is last slide
if (position == numberOfSlides - 1) {
$('#suivant').hide()
} else {
$('#suivant').show()
}
}
});
提前谢谢!