jQuery Carousel。如何在x秒后自动显示下一个元素

时间:2011-03-01 11:23:17

标签: javascript jquery html slideshow

我发现此问题已得到解答:jQuery Carousel How to show the Next or Previous Element only.并已使用该代码创建文字Feed。 “下一个”和“上一个”工作,现在我想将它设置为循环遍历feed onload,这是我到目前为止所提出的,但它不起作用:


  $(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 ); 

});

});

1 个答案:

答案 0 :(得分:1)

对于那些想要在悬停时添加暂停的人:

// 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);
});
 });