简体   繁体   English

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

[英]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. 我发现这个问题得到了解答: jQuery Carousel如何仅显示下一个或上一个元素。 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 have come up with so far, but it is not working: “下一个”和“上一个”工作,现在我想将其设置为循环通过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 ); 

});

});

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM