CODE slide ảnh hoặc tin tức chạy từ dưới lên liên tục không ngắt quãng

<div id="news-container">
 <i class="fa fa-arrow-up" id="prev"></i>
 <ul id="news-ticker">
  <li>1) Lorem ipsum dolor sit amet, porta at, imperdiet id neque. more info</li>
  <li>2) Lorem ipsum dolor sit amet, consectetur adipiscing elit. more info</li>
  <li>3) Lorem ipsum dolor sit amet more info more info more info more info</li>  
  <li>4) jugbit.com jquery vticker more info more info more info more info more info</li>
 </ul>
 <i class="fa fa-arrow-down" id="next"></i>
</div>

Các thẻ <i> dùng để tạo các nút cuộn Lên/Xuống có id tương ứng là prev và next.

#news-container {text-align: center;}
#news-container i {font-size: 36px;margin: 8px;cursor: pointer;}
#news-ticker li {
 color: #4e4e4e;
 background: #F2F2F2;
 overflow: hidden;
 height: 80px; /* Chiều cao mỗi tin */
 padding: 10px;
 line-height: 30px;
 font-size: 24px;
 text-align: left;
 border-bottom: 1px dotted #2c8162;
}

<script type=”https://code.jquery.com/jquery-1.10.2.min.js”></script>
<script type=”text/javascript” src=”js/jquery.newsTicker.min.js”></script>

Bước 4) Cài đặt plugin JQuery Advanced News Ticker:

$(function() {
 $('#news-ticker').newsTicker({
 row_height: 80,
 max_rows: 3,
 duration: 4000,
 prevButton: $('#prev'),
 nextButton: $('#next')
 });
});

Vậy là xong rồi đấy, bây giờ ban hãy mở trang web trên trình duyệt để xem kết quả.

Giải thích một số thông số mà bạn có thể tùy biến:

row_height: Chiều cao của một dòng, đơn vị là px. Mặc định là 22 px
max_rows: Số dòng sẽ hiển thị. Mặc định là 3 dòng
duration: Thời gian chuyển tin, đơn vị là mili giây. Mặc định là 2500 ms (2.5s)
prevButton: Phần tử dùng để cuộn lên (trước) một tin
nextButton: Phần tử dùng để cuộn xuống (sau) một tin

<style>
#contentTicker {max-width: 500px; margin: auto;}
#newsTicker-scroll {text-align: center;}
#contentTicker li {color: #4e4e4e;background: #F2F2F2;overflow: hidden;height: 30px;padding: 5px;line-height: 30px;list-style: none;font-size: 16px;text-align: left;border-bottom: 1px dotted #2c8162;}a, a:hover,a:focus {color: #01579b; text-decoration: none; outline: 0;}
</style>
<div id="newsTicker-scroll">
<ul id="contentTicker">
 <li><a href="https://gicovietnam.blogspot.com/2017/07/code-slide-anh-hoac-tin-tuc-chay-lien-tuc.html">CODE slide ảnh hoặc tin tức chạy từ dưới lên liên tục không ngắt quãng</a></li>
 <li><a href="https://gicovietnam.blogspot.com/2017/07/code-co-dinh-sidebar-khi-scroll-cuon-chuot.html">Code cố định Sidebar khi Scroll cuộn chuột lên xuống</a></li>
 <li><a href="https://gicovietnam.blogspot.com/2017/07/hack-wifi-chua-nha-hang-xom-khong-can-mat-khau.html">Hack wifi chùa nhà hàng xóm không cần mật khẩu</a></li>
 <li><a href="https://gicovietnam.blogspot.com/2017/06/code-tao-bai-viet-lien-quan-cho-blogsot.html">Code Tạo Bài Viết Liên Quan Cho Blogspot Gọn nhẹ</a></li>
 <li><a href="https://gicovietnam.blogspot.com/2017/07/bat-buoc-like-facebook-de-xem-tiep-bai-viet.html">Bắt buộc LIKE Facebook để xem tiếp bài viết</a></li>
 <li><a href="https://gicovietnam.blogspot.com/2017/06/huong-dan-dat-quang-cao-adsense-vao-giua-bai-viet-blog.html">Hướng dẫn đặt quảng cáo Adsense vào giữa bài viết trong Blogspot</a></li>
 <li><a href="https://gicovietnam.blogspot.com/2017/07/1001-ky-nang-giat-tit-tieu-de-trong-tin-bat-dong-san.html">1001 Kỹ năng giật tít tiêu đề trong Đăng tin bất động sản</a></li>
 <li><a href="https://gicovietnam.blogspot.com/2017/07/cach-reup-phim-len-youtube-khong-vi-pham-ban-quyen.html">Cách Reup phim lên Youtube không vi phạm bản quyền</a></li>
 <li><a href="https://gicovietnam.blogspot.com/2017/07/huong-dan-chen-comment-facebook-vao-blog.html">Hướng dẫn chèn comment facebook vào blogspot có kiểm duyệt bình luận</a></li>
 <li><a href="https://gicovietnam.blogspot.com/2017/07/hang-loat-fanpage-lon-tren-facebook-bi-xoa.html">Hàng loạt Fanpage lớn trên Facebook bị xóa sổ mà không rõ lý do</a></li>
</ul>
</div>
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="jquery.newsTicker.js"></script>
<script>
 var contentTicker = $('#contentTicker').newsTickerScroll({
  row_height: 50, //chieu cao khung newticker
  max_rows: 3,
  duration: 3000,
  prevButton: $('#nt-example1-prev'),
  nextButton: $('#nt-example1-next')
 });
</script>

Download toàn bộ code slide tin tức, hình ảnh chạy liên tục bên dưới, code này mình đã cố gắng lược bỏ rất nhiều để code gọn nhẹ, đơn giản nhưng vẫn đáp ứng được yêu cầu là các hình ảnh cuộn liên tục, các tin tức chạy liên tục không ngắt quãng

Tham khảo thêm tại trang chủ: http://risq.github.io/jquery-advanced-news-ticker/

>> Code slide hình ảnh hoặc bài viết mới chạy ngang liên tục cho Blogspot
>> Code cố định Sidebar khi Scroll cuộn chuột lên xuống
>> Code quảng cáo Popup under javascript ẩn đằng sau trình duyệt
>> Công cụ SEO từ khóa website tốt nhất dành cho dân SEO

Bạn đã làm theo các bước như trên mà vẫn không hiển thị slide ảnh cuộn từ dưới lên thì hãy để lại comment bên dưới nhé.