Horizontal news scroller jquery examples

Here are some examples of horizontal news scrollers using jQuery:

Example 1: Simple Horizontal Scroller

HTML:

<div id="news-scroller">
  <ul>
    <li>News Item 1</li>
    <li>News Item 2</li>
    <li>News Item 3</li>
    <!-- Add more news items here -->
  </ul>
</div>

CSS:

#news-scroller {
  width: 500px;
  overflow: hidden;
  white-space: nowrap;
}

#news-scroller ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#news-scroller li {
  display: inline-block;
  margin-right: 10px;
}

JavaScript:

$(document).ready(function() {
  var scroller = $('#news-scroller');
  var newsItems = scroller.find('li');
  var scrollerWidth = scroller.width();
  var newsItemsWidth = newsItems.width();
  var scrollInterval = null;

  scroller.on('mouseover', function() {
    clearInterval(scrollInterval);
  });

  scroller.on('mouseout', function() {
    scrollInterval = setInterval(function() {
      scroller.scrollLeft(scroller.scrollLeft() + 10);
    }, 50);
  });

  newsItems.each(function(index) {
    $(this).css('left', index * newsItemsWidth);
  });
});

This example uses a simple interval to scroll the news items horizontally. When the user hovers over the scroller, the scrolling stops.

Example 2: Animated Scroller with Fade-In

HTML:

<div id="news-scroller">
  <ul>
    <li>News Item 1</li>
    <li>News Item 2</li>
    <li>News Item 3</li>
    <!-- Add more news items here -->
  </ul>
</div>

CSS:

#news-scroller {
  width: 500px;
  overflow: hidden;
  white-space: nowrap;
}

#news-scroller ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#news-scroller li {
  display: inline-block;
  margin-right: 10px;
}

JavaScript:

$(document).ready(function() {
  var scroller = $('#news-scroller');
  var newsItems = scroller.find('li');
  var scrollerWidth = scroller.width();
  var newsItemsWidth = newsItems.width();
  var scrollInterval = null;
  var currentNewsItem = 0;

  scroller.on('mouseover', function() {
    clearInterval(scrollInterval);
  });

  scroller.on('mouseout', function() {
    scrollInterval = setInterval(function() {
      scroller.scrollLeft(scroller.scrollLeft() + 10);
      currentNewsItem++;
      if (currentNewsItem >= newsItems.length) {
        currentNewsItem = 0;
      }
      newsItems.eq(currentNewsItem).fadeIn(500).siblings().fadeOut(500);
    }, 50);
  });

  newsItems.each(function(index) {
    $(this).css('left', index * newsItemsWidth);
  });
});

This example uses an animated scrolling effect with fade-in/fade-out transitions. When the user hovers over the scroller, the scrolling stops.

Example 3: Scroller with Pause and Resume

HTML:

<div id="news-scroller">
  <ul>
    <li>News Item 1</li>
    <li>News Item 2</li>
    <li>News Item 3</li>
    <!-- Add more news items here -->
  </ul>
</div>

CSS:

#news-scroller {
  width: 500px;
  overflow: hidden;
  white-space: nowrap;
}

#news-scroller ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#news-scroller li {
  display: inline-block;
  margin-right: 10px;
}

JavaScript:

$(document).ready(function() {
  var scroller = $('#news-scroller');
  var newsItems = scroller.find('li');
  var scrollerWidth = scroller.width();
  var newsItemsWidth = newsItems.width();
  var scrollInterval = null;
  var paused = false;

  scroller.on('mouseover', function() {
    paused = true;
  });

  scroller.on('mouseout', function() {
    paused = false;
  });

  scroller.on('click', function() {
    if (paused) {
      scrollInterval = setInterval(function() {
        scroller.scrollLeft(scroller.scrollLeft() + 10);
      }, 50);
    } else {
      clearInterval(scrollInterval);
    }
  });

  newsItems.each(function(index) {
    $(this).css('left', index * newsItemsWidth);
  });
});

This example adds a pause and resume functionality to the scroller. When the user hovers over the scroller, the scrolling pauses. When the user clicks on the scroller, the scrolling resumes.

These are just a few examples of how you can create a horizontal news scroller using jQuery. You can customize the appearance and behavior of the scroller to fit your specific needs.