JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div class="abgne-news-scroll">
		<ul>
			
		</ul>
	</div>
</body>

CSS

ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.abgne-news-scroll {
	border: 1px solid #f39;
	width: 320px;
	height: 120px;
	overflow: hidden;
	position: relative;
}
.abgne-news-scroll li {
	background: url(arr.jpg) no-repeat 5px 10px;
	padding: 5px 0 5px 19px;
  display: none;
}

JavaScript

$(function(){
	
  const news = [
      "圖書管理系統 - 預算約 20 萬元xxxxxxxxxxxxxxxx",
			"WordPress 投票系統 - 預算 3 萬元",
			"Joomla 網站設計整合 - 預算 4 萬元",
			"網頁文案 - 請報價"
  ]
  
  const $news = $('.abgne-news-scroll>ul')
  const fadeInTime = 600,
  			fadeOutTime = 600,
        fadeDelay = 1500,
        interval = 3000
  
  let current = news[0]
  
  function startScroll(data, $elm, fadeInTime, fadeOutTime, fadeDelay){
    
    function _next(current){
      return data.length - 1 == data.indexOf(current)? data[0] : data[data.indexOf(current) + 1]
    }
    
    function show(){
    	$elm.html(`<li>${current}</li>`)
      $elm.find('li').fadeIn(fadeInTime).delay(fadeDelay).fadeOut(fadeOutTime)
      current = _next(current)
    }
    show()
  }
  
  setInterval(function(){startScroll(news, $news, fadeInTime, fadeOutTime, fadeDelay)}, interval)
	
});