开发者

jQuery Carousel. How to automatically show the Next Element after x seconds

开发者 https://www.devze.com 2023-02-14 06:29 出处:网络
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.

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

精彩评论

暂无评论...
验证码 换一张
取 消