jQuery Carousel. How to automatically show the Next Element after x seconds
I found this question answered: jQuery Carousel How to show the Next or Previous Element only. and have used the code to create a text feed. The "next" and "previous" work, now I want to set it to loop through the feed onload, this is what I 开发者_如何学JAVAhave come up with so far, but it is not working:
$(function(ticker) {
$('#latest_news_ticker li').fadeOut(0);
$('#latest_news_ticker li:first').fadeIn(500);
$('a.leftarrow, a.rightarrow').click(function (ev)
{
//prevent browser jumping to top
ev.preventDefault();
//get current visible item
var $visibleItem = $('#latest_news_ticker li:visible');
//get total item count
var total = $('#latest_news_ticker li').length;
//get index of current visible item
var index = $visibleItem.prevAll().length;
//if we click next increment current index, else decrease index
$(this).attr('href') === '#carouselNext' ? index++ : index--;
//if we are now past the beginning or end show the last or first item
if (index === -1){
index = total-1;
}
if (index === total){
index = 0
}
//hide current show item
$visibleItem.hide();
//fade in the relevant item
$('#latest_news_ticker li:eq(' + index + ')').fadeIn(500);
//after x seconds click next
});
$(document).ready(function() {
var t = setInterval ( 'ticker()', 1000 );
});
});
For those who want to add a pause on hover:
// JavaScript Document
$(function(){
$('#latest_news_ticker li').fadeOut(0);
$('#latest_news_ticker li:first').fadeIn(500);
var ticker = setInterval(nextone,3000);
function nextone() {
var $visibleItem = $('#latest_news_ticker li:visible');
var total = $('#latest_news_ticker li').length;
var index = $visibleItem.prevAll().length;
$(this).attr('href') === '#carouselNext' ? index++ : index--;
if (index === -1) {
index = total - 1;
}
if (index === total) {
index = 0
}
$visibleItem.hide();
//fade in the relevant item
$('#latest_news_ticker li:eq(' + index + ')').fadeIn(500);
};
$('#latest_news_ticker li a')
.hover(
function () {
clearInterval(ticker)
},
function () {
ticker = setInterval(nextone, 3000);
}
);
$('a.leftarrow, a.rightarrow').click(
function(ev) {
ev.preventDefault();
nextone();
clearInterval(ticker);
ticker = setInterval(nextone, 3000);
});
});
精彩评论