jQuery 做跑馬燈

jquery

mayyola 2021-04-27 21:26:45 ‧ 2048 瀏覽

分享至

大家好:
想請問第一次載入第一則訊息不重複兩遍
https://jsfiddle.net/tnxa7dsr/1/

html

<body>
	<div class="abgne-news-scroll">
		<ul>
			<li>圖書管理系統 - 預算約 20 萬元</li>
			<li>WordPress 投票系統 - 預算 3 萬元</li>
			<li>Joomla 網站設計整合 - 預算 4 萬元</li>
			<li>網頁文案 - 請報價</li>
		</ul>
	</div>
</body>

css

.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;
}

$(function(){
	// 先取得 .abgne-news-scroll ul 及 li 的高度
	// 並設定訊息移動, 淡入及輪播時間
  $('.abgne-news-scroll ul li:not(:first)').hide();
	var $news = $('.abgne-news-scroll ul'), 
		scrollHeight = $news.find('li').outerHeight(true), 
		scrollSpeed = 600, fadeInSpeed = 600, 
		timer, speed = 3000;
 
	// 用來控制輪播用
	function newsScroll(){
		// 先把 .abgne-news-scroll ul 往下移
		$news.animate({
			top: scrollHeight + 'px'
		}, scrollSpeed, function(){
			// 當 .abgne-news-scroll ul 移動到定點後
			// 先找出最後一個 li
      $('.abgne-news-scroll ul li:not(:first)').hide();
			var $last = $news.find('li:first');
			// 複製一份並先隱藏起來
			// 接著把它加到 .abgne-news-scroll ul 中的第一個項目
			// 最後用淡入的方式顯示, 當顯示完後繼續輪播
			$last.clone().hide().appendTo($news).fadeIn(fadeInSpeed, function(){
				timer = setTimeout(newsScroll, speed);
			});
			// 馬上把 .abgne-news-scroll ul 第一個li 移到 buttom 等於 0 的位置
			$news.css('bottom', 0);
			// 把 $last 移除掉
			$last.remove();
		});
	}
 
	// 啟動輪播計時器
	timer = setTimeout(newsScroll, speed);
});

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

froce

iT邦大師 1 級 ‧ 2021-04-27 22:20:26

最佳解答

.abgne-news-scroll li {
  display: none;
}

css加這個就不會重複了。
要不然你newScroll那邊不要從第一項開始，從第二項開始。

改了一下，把寫死的部份拿出來
https://jsfiddle.net/etbyxg0j/

$(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)
	
});

我是會這樣寫啦。