jQuery title automatic flip implementation code_jquery

That is, after a piece of news scrolls into the view, it will pause for a few seconds, then continue to scroll up 2 and fade out of the view. At the same time, the next piece of news will then scroll into the view. This time I mainly use jquery to develop this function. There must be many shortcomings in it. Everyone is welcome to comment.
Paste the code first,

Copy the code The code is as follows:

')
.addClass('publication-date')
.text(pubMonth '/' pubDay '/' pubYear);

var $summary = $('

')
.addClass('summary')
.html($('description', this).text());

$('

')
.addClass('headline')
.append($headline, $publication)
.appendTo($container);
});

var currentHeadline = 0, oldHeadline = 0;
var hiddenPosition = $container.height() 10;
$('div.headline').eq(currentHeadline).css('top', 0);
var headlineCount = $('div.headline').length;
var pause;

var headlineRotate = function() {
currentHeadline = (oldHeadline 1) % headlineCount;
$ ('div.headline').eq(oldHeadline).animate(
{top: -hiddenPosition}, 'slow', function() {
$(this).css('top', hiddenPosition);
});
$('div.headline').eq(currentHeadline).animate(
{top: 0}, 'slow', function() {
pause = setTimeout(headlineRotate , 4000);
});
oldHeadline = currentHeadline;
};
pause = setTimeout(headlineRotate, 4000);

$container.hover(function() {
clearTimeout(pause);
}, function() {
pause = setTimeout(headlineRotate, 3000);
});
});
});
} );

Recent News

News Releases

Let’s solve it Let’s take a look at these codes. First, let’s look at the style. Because we only display one news record at a time, we should also set the height to one record, here to 200px, and if it exceeds, we will automatically hide the overflow. =hidden. Here, we use feed.xml as the data source. It is very simple for Jquery to load and read the xml file. You can refer to the above writing method. By reading the xml file, taking out the data, and assembling it, you will get the html to be displayed. The code snippet is attached to #container. At the same time, in the scroll display, we need to set two variables, one to record the currently visible title, and the other to record the title that has just scrolled out of view. And let the current record be displayed at the top. It must be noted that the position cannot be static. Finally, just write a function to automatically call the display of the record every time. There are also many plug-ins for jquery that can simplify these operations. You will learn more about them in the future. If you want to learn jquery, I personally recommend the basic jquery tutorial written by jonathan chaffer. It is very good and suitable for beginners. It is written by other people in China, but it is a mixed bag.