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

Question

我想配置插件，以便在激活照片时显示描述性文本。有问题，因为我得到的是“41 号的 1 号照片”或 43 号的 3 号照片。

  $(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) + 'broccoli'; $('#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;
            }
            }
            });

        });

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

Add text by picture in slideshow using jquery en plugin

jquery

text

plugins

slideshow

configure