https://blogmura.com/js/normal/topic-c52acb282ccec4a59c73cf3fba403323.js

1var timer = null;
2
3ticker = {};
4ticker.totalList = 0;
5ticker.numList = 0;
6ticker.time = 800;
7ticker.interval = 3800;
8
9$(function() {
10  if ($('#div_ticker').length != 0) {
11    // ページ読み込み後
12    ticker.totalList = $('#news-list li').length;
13    ticker.width = $('#div_ticker').css('width');
14    ticker.height = $('#div_ticker').css('height');
15    var str = $('#news-list li:first').html();
16    $('#div_ticker').html(str);
17    _interval.start();
18
19    // ウィンドウからフォーカスが外れたら停止
20    $(window).focus(function() {
21      _interval.start();
22    }).blur(function() {
23      _interval.stop();
24    });
25
26    // ホバー時は停止
27    $('#div_ticker').hover(function() {
28      _interval.stop();
29    }, function() {
30      _interval.start();
31    });
32  }
33});
34
35var _interval = {
36  start : function() {
37    // 既にONになっている時/お知らせがない時は何もしない
38    if (timer == null && $('#div_ticker').length != 0) {
39      _interval.topic();
40    }
41  },
42  stop : function() {
43    if ($('#div_ticker').length != 0) {
44      clearTimeout(timer);
45      timer = null;
46    }
47  },
48  set : function() {
49    // リストの順番を決める
50    ticker.numList ++;
51    if (ticker.numList > ticker.totalList - 1) {
52      ticker.numList = 0;
53    }
54
55    // a要素を取得
56    var str = $('#news-list li').eq(ticker.numList).html();
57
58    // 下から上＋フェードインフェードアウト
59    $('#div_ticker').animate({top: '-' + ticker.height, opacity: '0'}, ticker.time, 'linear', function(){
60      $('#div_ticker').html(str);
61      $('#div_ticker').css('top', ticker.height).css('opacity', '0').animate({top: '0', opacity: '1.0'}, ticker.time, 'linear');
62    });
63  },
64  topic : function() {
65    // on -> on の時はメッセージ表示
66    // off -> onの時は何もせず表示まで間を開ける
67    if (timer != null) {
68      _interval.set();
69    }
70
71    timer = setTimeout(_interval.topic, ticker.interval);
72  }
73}
74