JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="list">
  <li>item-1</li>
  <li>item-2</li>
  <li>item-3</li>
  <li>item-4</li>
  <li>item-5</li>
</ul>

CSS

#list {
    width: 100px;
    
    background: #fbfbfb;
    border: 1px solid #ddd;
}

li.active {
    color: red;
}

JavaScript

var changeItem, foo;

changeItem = function(items, interval) {
    
    if (typeof items === 'string') items = $(items);
    
    if (!items.filter('.active').length) items.eq(0).addClass('active');
    
    return setInterval(function() {
        
        var currItem = items.filter('.active'),  
            nextItem = currItem.next();
        
        if (!nextItem.length) nextItem = items.eq(0);
        
        currItem.removeClass('active');
        nextItem.addClass('active');
        
    }, interval);
    
};
    
foo = changeItem('#list li', 1000);





/* ---------------------------------------------- */

$('#list')
    .on('mouseenter', function() {
        clearInterval(foo);    
    })
    .on('mouseleave', function() {
        foo = changeItem('#list li', 1000);  
    });