Javascript 新闻播报器-带有“下一步”和“上一步”按钮的自动更改div

我是JQuery的新手，所以请温柔一点。我有一个用html和css构建的新闻代码，JQuery激活下一个和上一个按钮。我期待得到的div的自动播放加载，但仍然允许用户使用导航按钮。我似乎能够让导航或自动播放工作，但不能在一起。有没有可能有人能帮我。我知道我错过了一些重要的事情，但我似乎无法理解。 我的代码可以在这里看到-

HTML

剧本

$(document).ready(function(){

var news = $(".newsTicker");
var newsIndex = -1;

function showNextNews() {
++newsIndex;
news.eq(newsIndex % news.length)
.fadeIn(2000)
.delay(2000)
.fadeOut(2000, showNextNews);
}

showNextNews();

}) ();

$(function () {
$("#next").click(function () {
var activeDiv = $("div.active");
activeDiv.removeClass("active");
if (activeDiv.next().length === 0) {
$("div.newsTicker").eq(0).addClass("active").css("opacity", 0).animate({
opacity: 1
}, 800);
} else {
activeDiv.next().addClass("active").css("opacity", 0).animate({
opacity: 1
}, 800);
}
});

$("#prev").click(function () {
var activeDiv = $("div.active");
activeDiv.removeClass("active");
if (activeDiv.prev().length === 0) {
$("div.newsTicker").eq(-1).addClass("active").css("opacity", 0).animate({
opacity: 1
}, 800);
} else {
activeDiv.prev().addClass("active").css("opacity", 0).animate({
opacity: 1
}, 800);
}
});
});

---

现在，将您需要的添加到第一个函数中

您已经在单击按钮导航提要了。现在，您可以创建一个

setInterval

，它将循环一段时间，在经过时，单击必要的按钮。要停止，您还可以悬停

clearInterval

。这应该行得通，非常感谢。谢谢你给我指明了正确的方向。我甚至添加了clearIntraval来暂停悬停。任何关于如何通过xml文件更新内容以进行动态更新的想法。

#myNewsticker{
float: right;
margin-top: 20px;
margin-right: 8px;
width: 460px;
border-radius: 25px;
padding: 0 20px;
background: #851818;
color: white;
font-size: 14px;
font-family: calibri;
}

.tickerLable {
margin: 5px;
padding: 5px;
max-width: 38px;
}

#myNewsticker .newsTicker {
display: none;   
}

#myNewsticker .newsTicker.active{
display: block; 
}

.newsTicker {
margin-top: -32px;
padding: 5px;
max-width: 400px;
float: left;
margin-left: 60px;
}

#newsNav {
padding-top: 3px;
width: 51px;
float: right;
margin-right: 15px;
margin-top: 3px;
}

#prev img, #next img{
width: 25px; /***changes size of images height and width****/
}

$(document).ready(function(){

var news = $(".newsTicker");
var newsIndex = -1;

function showNextNews() {
++newsIndex;
news.eq(newsIndex % news.length)
.fadeIn(2000)
.delay(2000)
.fadeOut(2000, showNextNews);
}

showNextNews();

}) ();

$(function () {
$("#next").click(function () {
var activeDiv = $("div.active");
activeDiv.removeClass("active");
if (activeDiv.next().length === 0) {
$("div.newsTicker").eq(0).addClass("active").css("opacity", 0).animate({
opacity: 1
}, 800);
} else {
activeDiv.next().addClass("active").css("opacity", 0).animate({
opacity: 1
}, 800);
}
});

$("#prev").click(function () {
var activeDiv = $("div.active");
activeDiv.removeClass("active");
if (activeDiv.prev().length === 0) {
$("div.newsTicker").eq(-1).addClass("active").css("opacity", 0).animate({
opacity: 1
}, 800);
} else {
activeDiv.prev().addClass("active").css("opacity", 0).animate({
opacity: 1
}, 800);
}
});
});

function next_item() {
   do some stuff here;  
}
$(document).ready(function() { 
   //maybe wait 5 secs? 
   next_item();
}
$(".next_buttons").on('click', function() {
    next_item();
    //maybe disable the button, till next element is ready
}