悬停新闻滑块/股票代码暂停

Question

我对jquery / js一无所知，但我将在网上找到的News Slider / Ticker脚本应用于了我的网站主页。脚本本身可以正常工作。 html和css部分很容易，但是我找不到使其正确的方法[[悬停时暂停。随附的.js文件很长，我怀疑它甚至没有被使用，但正如我所说，我不知道js。很抱歉长的js文件，但我不知道其中涉及了哪些部分。有人可以帮助这个完整的新手吗？

(function ($) {
$.simpleTicker = function (elem, options) {
var defaults = {
  speed: 1000,
  delay: 4000,
  easing: 'swing',
  effectType: 'slide'
};

var param = {
  'ul': '',
  'li': '',
  'initList': '',
  'ulWidth': '',
  'liHeight': '',
  'tickerHook': 'tickerHook',
  'effect': {}
};

var plugin = this;
plugin.settings = {};

var $element = $(elem),
  element = elem;

plugin.init = function () {
  plugin.settings = $.extend({}, defaults, options);
  param.ul = element.children('ul');
  param.li = element.find('li');
  param.initList = element.find('li:first');
  param.ulWidth = param.ul.width();
  param.liHeight = param.li.height();

  element.css({
    height: (param.liHeight)
  });
  param.li.css({
    top: '0',
    left: '0',
    position: 'absolute'
  });

  //dispatch
  switch (plugin.settings.effectType) {
    case 'fade':
      plugin.effect.fade();
      break;
    case 'roll':
      plugin.effect.roll();
      break;
    case 'slide':
      plugin.effect.slide();
      break;
  }
  plugin.effect.exec();
};

plugin.effect = {};

plugin.effect.exec = function () {
  param.initList.css(param.effect.init.css)
    .animate(param.effect.init.animate, plugin.settings.speed, plugin.settings.easing)
    .addClass(param.tickerHook);
  if (element.find(param.li).length > 1) {
    setInterval(function () {
      element.find('.' + param.tickerHook)
        .animate(param.effect.start.animate, plugin.settings.speed, plugin.settings.easing)
        .next()
        .css(param.effect.next.css)
        .animate(param.effect.next.animate, plugin.settings.speed, plugin.settings.easing)
        .addClass(param.tickerHook)
        .end()
        .appendTo(param.ul)
        .css(param.effect.end.css)
        .removeClass(param.tickerHook);
    }, plugin.settings.delay);
  }
};

plugin.effect.fade = function () {
  param.effect = {
    'init': {
      'css': {
        display: 'block',
        opacity: '0'
      },
      'animate': {
        opacity: '1',
        zIndex: '98'
      }
    },
    'start': {
      'animate': {
        opacity: '0'
      }
    },
    'next': {
      'css': {
        display: 'block',
        opacity: '0',
        zIndex: '99'
      },
      'animate': {
        opacity: '1'
      }
    },
    'end': {
      'css': {
        display: 'none',
        zIndex: '98'
      }
    }
  };
};

plugin.effect.roll = function () {
  param.effect = {
    'init': {
      'css': {
        top: '3em',
        display: 'block',
        opacity: '0'
      },
      'animate': {
        top: '0',
        opacity: '1',
        zIndex: '98'
      }
    },
    'start': {
      'animate': {
        top: '-3em',
        opacity: '0'
      }
    },
    'next': {
      'css': {
        top: '3em',
        display: 'block',
        opacity: '0',
        zIndex: '99'
      },
      'animate': {
        top: '0',
        opacity: '1'
      }
    },
    'end': {
      'css': {
        zIndex: '98'
      }
    }
  };
};


plugin.effect.slide = function () {
  param.effect = {
    'init': {
      'css': {
        left: (200),
        display: 'block',
        opacity: '0'
      },
      'animate': {
        left: '0',
        opacity: '1',
        zIndex: '98'
      }
    },
    'start': {
      'animate': {
        left: (-(200)),
        opacity: '0'
      }
    },
    'next': {
      'css': {
        left: (param.ulWidth),
        display: 'block',
        opacity: '0',
        zIndex: '99'
      },
      'animate': {
        left: '0',
        opacity: '1'
      }
    },
    'end': {
      'css': {
        zIndex: '98'
      }
    }
  };
};

plugin.init();
};

$.fn.simpleTicker = function (options) {
return this.each(function () {
  if (undefined == $(this).data('simpleTicker')) {
    var plugin = new $.simpleTiecker(this, options);
    $(this).data('simpleTicker', plugin);
  }
});
};
})(jQuery);

Answer 1

我认为该库很旧，使用起来非常复杂。我个人建议您按照Slick Slider的方法移动。

Slick：https://kenwheeler.github.io/slick/

您可以使用CDN版本<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

我能够通过Click在大约5分钟内（带有悬停暂停）重新创建您的用例。因为它是一个实际的滑块，所以最好将其包装在<div>容器中，因此，在向您展示的小提琴中已经做到了。您可以调整CSS不透明度动画的味道，但这基本上就是您现在正在做的。

小提琴：Slick Slider