簡體   English   中英

jQuery輪播。 如何在x秒后自動顯示下一個元素

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

我發現這個問題得到了解答: jQuery Carousel如何僅顯示下一個或上一個元素。 並使用該代碼創建了文本供稿。 “下一個”和“上一個”工作,現在我想將其設置為循環通過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 ); 

});

});

對於那些想要在懸停上添加暫停的人:

// 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