JavaScriptのニュースティッカーについて

JavaScriptでhttps://youtu.be/o1P5PSmnFzQのようなニュースティッカーを作りたいと思っています。

仕様としては表示する内容をタイトルとテキストに分けてテキストはジャンルごとに分けたいと思っています。
テキストのジャンルが変わるとタイトルも変わるみたいなのが作りたいです。

HYML

<!DOCTYPE html>
<html lang="ja">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="top.js"></script>
</head>
<div class="ticker">
<div id="title">タイトル1<div>
<ul class="ul_news">
<li><a href="#">テキスト1</a></li>
<li><a href="#">テキスト2</a></li>
<li><a href="#">テキスト3</a></li>
</ul>
<div id="title">タイトル1</div>
<ul id="ul_news">
<li><a href="#">テキスト1</a></li>
<li><a href="#">テキスト2</a></li>
<li><a href="#">テキスト3</a></li>
<li><a href="#">テキスト4</a></li>
</ul>
<div class="title">タイトル3</div>
<ul id="ul_news">
<li><a href="#">テキスト1</a></li>
<li><a href="#">テキスト2</a></li>
<ul>
</div>

<div id="div_title" class="tick"></div>
<div id="div_ticker" class="tick"></div>

CSS

ul {
  list-style-type: none;
}
div.title {
    margin: 15px 0px 3px 5px
}

#ul_news {
    display: none;
    color:black;
}
div.tick {
    width: 300px;
    height: 30px;
    line-height: 30px;
    text-align: left;
    border: solid 1px silver;
    position: relative;
    overflow: hidden;
    

}

div.tick a {
    position: absolute;
    margin-left: 10px;
    font-size: 1.0em;
    color: gray;
}

JavaScript

var timer;

// newstickerの設定用オブジェクト
ticker = {};
ticker.totalList = 0;  
ticker.numList = 0;  
ticker.time = 1000; 
ticker.interval = 4000; 

// load
$(window).on('load',function(){

    ticker.totalList = $('#ul_news li').length; 
    
    ticker.width = $('.tick').css('width');
    ticker.height = $('.tick').css('height'); 
    
    var str = $('#ul_news li:first').html();  


    $('#div_ticker').html(str);
    
    timer = setInterval('showNews()', ticker.interval);
    
});
    
function showNews(){
    

    ticker.numList ++;
    if (ticker.numList > ticker.totalList - 1){
        ticker.numList = 0;
    }

    var str = $('#ul_news li').eq(ticker.numList).html(); 

    $('#div_ticker a').animate({left: '-' + ticker.width}, ticker.time, 'linear', function(){
        $('#div_ticker').html(str);
        $('#div_ticker a').css('left', ticker.width).animate({left: '0'}, ticker.time, 'linear');
    });

}

ここまで完成したのですがジャンルが変わったときにタイトルを変える方法がわかりません。