Auto Cycle through list items
Hi all,
I am new to jquery. I tried to simulate the news box given in this link:
www.iac.gatech.edu
.
I am trying to build my hobby project based on the above link.
I want to make this news box cycle through headlines automatically and also retain the manual click function.
The code for the the click event is as follows: [common.js]
$(document).ready(
function()
{
// set up "featured news" box
var news_moving = 0;
$('.l-splash div.headlines a').click(
function (e)
{
e.preventDefault();
var l = $(this);
l.blur();
if (l.hasClass('active'))
{
return;
}
if (news_moving > 0)
{
return;
}
news_moving = 2;
var prev_l = $('div.l-splash div.headlines a.active');
prev_l.removeClass('active');
l.addClass('active');
// figure out if the animation is forward or backward
var prev_li = prev_l.closest('li');
var new_li =
var direction = prev_li.prevAll().index(new_li) == -1 ? 'forward' : 'backward';
var cur_story = $('.l-splash div.stories div.active');
var new_story = $('.l-splash div.stories '+l.attr('href'));
if (direction == 'forward')
{
// begin animation for hiding current story
cur_story.animate({
left : '-559px',
opacity : 0.0
}, function () { news_moving -= 1; cur_story.removeClass('active'); } );
// begin animation for showing new story
new_story.css({ left : '559px', opacity : 0.0, display : 'block' }).animate({
left : '0px',
opacity : 1.0
}, function () { news_moving -= 1; new_story.addClass('active'); } );
}
else
{
// begin animation for hiding current story
cur_story.animate({
left : '559px',
opacity : 0.0
}, function () { news_moving -= 1; cur_story.removeClass('active'); } );
// begin animation for showing new story
new_story.css({ left : '-559px', opacity : 0.0, display : 'block' }).animate({
left : '0px',
opacity : 1.0
},
function () { news_moving -= 1; new_story.addClass('active'); } );
}
}
);
}
);
please help me add a code which might help in cycling through the headlines periodically.
The Html is of the form:
<div class="headlines">
<ul>
<li class="first">
<a class="active" href="#news-3249">Georgia Tech Search for New Ivan Allen…</a>
</li>
<li class="second">
<a href="#news-3352">Space Diplomacy: Krige Showcases NASA’s…</a>
</li>
<li class="">
<a href="#news-3355">Poet Head Makes History in Trafalgar Square</a>
</li>
<li class="">
<a href="#news-3350">Distinctive Language Studies Attract 1 in 5…</a>
</li>
<li class="last">
<a href="#news-3354">Wang on Big Mac Diplomacy, U.S. & China…</a>
</li>
</ul>
</div>
<div class="stories">
<div class="story active" id="news-3249">
<div class="picture" style="margin-top:0px">
<a href="/news-and-events/story?id=3249"><img src="http://www.gatech.edu/upload/pr/tbn60860.jpg" alt="College Administration Building" /></a>
</div>
<h3><a href="/news-and-events/story?id=3249">Georgia Tech Search for New Ivan Allen College Dean</a></h3>
<div class="date">August 12, 2009</div>
<div class="text defstyle"><p>
The President and the Provost of Georgia Tech have announced a nationwide search for a new dean of the Ivan Allen College who can lead the College to continued prominence and accomplishment. The new dean will be a successor to Dean Sue V. Rosser who departed the Ivan Allen College this summer to assume the position of Provost at San Francisco State University. </p></div>
<div class="more">
<a href="/news-and-events/story?id=3249">Learn more <img src="/styles/icon-arrow-right-grayonblue.gif" alt=">" /></a>
</div>
</div>
Any help solicited..if there is an existing solution please guide me towards it. I have tired searching but I am not able to arrive at a solution.
Thanks