Question

我使用的是简单的Text Rotator，它很精彩，我唯一的问题是我试图旋转的文字是链接：

<h1 class="sliding-text">
    <span class="rotate">
        <a href="#link-1">Link 1</a>, 
        <a href="#link-2">Link 2</a>,
        <a href="link-3.php">Link 3</a>,
        <a href="link-4.php">Link 4</a>
    </span>
</h1>

但是当我运行我的网站时，它们不再是链接：（

以下是我如何将库添加到滑动文本h1：

$(".sliding-text .rotate").textrotator({
    animation: "fade",
    speed: 1000
});

这里是库的jquery代码：

!function ($) {

    var defaults = {
        animation: "fade",
        separator: ",",
        speed: 2000
    };

    $.fx.step.textShadowBlur = function (fx) {
        $(fx.elem).prop('textShadowBlur', fx.now).css({ textShadow: '0 0 ' + Math.floor(fx.now) + 'px black' });
    };

    $.fn.textrotator = function (options) {
        var settings = $.extend({}, defaults, options);

        return this.each(function () {
            var el = $(this)
            var array = [];
            $.each(el.text().split(settings.separator), function (key, value) {
                array.push(value);
            });
            el.text(array[0]);

            // animation option
            var rotate = function () {
                switch (settings.animation) {

                    case 'fade':
                        el.fadeOut(500, function () {
                            index = $.inArray(el.text(), array)
                            if ((index + 1) == array.length) index = -1
                            el.text(array[index + 1]).fadeIn(settings.speed);
                        });
                        break;
                }
            };
            setInterval(rotate, 8000);
        });
    }

}(window.jQuery);

正如您所看到的那样，分隔符是,，这是我在每个链接之后所拥有的，为什么链接没有出现？我有什么办法可以在旋转器中添加带文本的链接吗？

Answer 1

看起来该库设置为仅使用jQuery的.text（）方法进行旋转。因此，在构建文本数组时，将解析出任何无关的HTML。对库代码进行一些修改将为您解决问题。

  var el = $(this)
  var array = [];

  $.each(el.html().split(settings.separator), function(key, value) {
    array.push(value);
  });

  el.html(array[0]);

我们将库的.text（）切换到.html（）。这确保了HTML元素将被添加到分隔符之间的数组中，而不仅仅是元素的内部文本。

      var rotate = function() {
        switch (settings.animation) {
            case 'fade':
            el.fadeOut(500, function() {
              index = $.inArray(el.html(), array)
              if((index + 1) == array.length) index = -1
              el.html(array[index + 1]).fadeIn(settings.speed);
            });
          break;
        }
      };

我们在库的旋转功能中基本上做同样的事情。将它切换到.html（），以便比较仍然有效，这样数组中的HTML将正确淡入。

有关正常工作的演示，请参阅此fiddle

jQuery - 带有href链接的简单文本旋转器

1 个答案: