Пауза при наведении курсора новостей

Question

Я ничего не знаю о jquery / js, но я применил скрипт News Slider / Ticker, который я нашел в Интернете, на домашней странице моего сайта. Сам скрипт отлично работает. Детали html и css были достаточно просты, но я не могу найти правильный способ сделать это PAUSE ON HOVER . Файл. 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/slick-carousel@1.8.1/slick/slick.min.js"></script>

Мне удалось воссоздать ваш вариант использования примерно через 5 минут (с паузой при наведении курсора) с помощью Click. Поскольку это настоящий слайдер, лучше обернуть вещи в <div> контейнеры, поэтому я сделал это в скрипте, которую я вам показал. Вы можете настроить анимацию непрозрачности CSS по вкусу, но это в основном то, что вы делаете сейчас.

The Fiddle: Slick Slider