[英]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.