使用jquery en插件在幻灯片中逐图片添加文本

Question

我想配置插件，以便在照片激活时显示描述性文本。出现了问题，因为取而代之的是文本"；Foto 1 from 4花椰菜"；或"；Foto 3 from 4 rodekool"；我得到"；Foto 1从41〃；或"；Foto 3从43〃；。

$(document).ready(function () {

$('#imgContainer').cycle({
'fx': 'scrollHorz',
'paused': true
});
// knoppen Vorige en Volgende
$('#btnPrev').on('click', function () {
$('#imgContainer').cycle('prev');
});
$('#btnNext').on('click', function () {
$('#imgContainer').cycle('next');
});

$('#imgContainer').on('cycle-next', function (event, optionHash) {
var currentImage = optionHash.currSlide + 1; 
var groenten = currentImage;
switch (groenten) {
case '1' : {
document.getElementById('imgContainer').innerHTML = 'broccoli';
break;
}
case '2' : {
document.getElementById('imgContainer').innerHTML = 'prei';
break;
}  
case '3' : {
document.getElementById('imgContainer').innerHTML = 'rodekool';
break;
} 
case '4' : {
document.getElementById('imgContainer').innerHTML = 'witlof';
break;
} 
};
var text = 'Foto ' + currentImage + ' van ' + ($('#imgContainer img').length - 1) + groenten;
$('#imgCounter').html(text);
});
$('#imgContainer').on('cycle-prev', function (event, optionHash) {
var currentImage = optionHash.currSlide + 1;
var text = 'Foto ' + currentImage + ' van ' + ($('#imgContainer img').length - 1);
$('#imgCounter').html(text);
})
});

Answer 1

var groenten不是必需的，相反，switch(groenten(是switch(currentImage(，case如下：案例1:{
var text='Foto'+currentImage+'van'+($('#imgContainer-img'(.length-1(+'花椰菜'；$('#imgCounter'(.html(文本(；打破}

所以整个代码都是

$(document).ready(function () {
// Plug-in laden met configuratieobject. Beginstatus gepauzeerd.
$('#imgContainer').cycle({
'fx': 'scrollHorz',
'paused': true
});
// knoppen Vorige en Volgende
$('#btnPrev').on('click', function () {
$('#imgContainer').cycle('prev');
});
$('#btnNext').on('click', function () {
$('#imgContainer').cycle('next');
});
// Events aanhaken, zie http://jquery.malsup.com/cycle2/api/ (onderin) voor complete documentatie.
$('#imgContainer').on('cycle-next', function (event, optionHash) {
var currentImage = optionHash.currSlide + 1;  
switch (currentImage) {
case 1: {            
var text = 'Foto ' + currentImage + ' van ' + ($('#imgContainer img').length - 1) + ' broccoli';
$('#imgCounter').html(text);
break;
}
case 2: {            
var text = 'Foto ' + currentImage + ' van ' + ($('#imgContainer img').length - 1) + ' prei';
$('#imgCounter').html(text);
break;
}
case 3: {            
var text = 'Foto ' + currentImage + ' van ' + ($('#imgContainer img').length - 1) + ' rodekool';
$('#imgCounter').html(text);
break;
}
case 4: {            
var text = 'Foto ' + currentImage + ' van ' + ($('#imgContainer img').length - 1) + ' witlof';
$('#imgCounter').html(text);
break;
}
}
});
$('#imgContainer').on('cycle-prev', function (event, optionHash) {
var currentImage = optionHash.currSlide + 1;
switch (currentImage) {
case 1: {            
var text = 'Foto ' + currentImage + ' van ' + ($('#imgContainer img').length - 1) + ' broccoli';
$('#imgCounter').html(text);
break;
}
case 2: {            
var text = 'Foto ' + currentImage + ' van ' + ($('#imgContainer img').length - 1) + ' prei';
$('#imgCounter').html(text);
break;
}
case 3: {            
var text = 'Foto ' + currentImage + ' van ' + ($('#imgContainer img').length - 1) + ' rodekool';
$('#imgCounter').html(text);
break;
}
case 4: {            
var text = 'Foto ' + currentImage + ' van ' + ($('#imgContainer img').length - 1) + ' witlof';
$('#imgCounter').html(text);
break;
}
}
});
});