新闻提示-使用下一个和上一个按钮自动更改div

Question

我是JQuery的新手，所以请温柔一点。我有一个用html和css构建的新闻ticker，JQuery激活了下一个和上一个按钮。我想让div在加载时自动播放，但仍然允许用户使用导航按钮。我似乎可以让导航或自动播放正常工作，但不能一起工作。只要有人能帮助我。我知道我错过了一件大事，但我似乎想不通。我的代码可以在这里看到-

http://jsfiddle.net/s8qotsj2/8/

HTML

<div id="myNewsticker">
<div id="newsNav">
    <a href="#" id="prev"><img src="images/back.png"></a><a href="#" id="next"><img src="images/next.png"></a>
</div>
<div class="tickerlable">News:</div>
    <div class="newsContent">
        <div class="newsTicker active">School closed 12/12/15 - Snow Day - All Classes Closed</div>
        <div class="newsTicker">Checkout our New Website.</div>
        <div class="newsTicker">New Students Handbook Now Available.</div>
        <div class="newsTicker">Resouces Links Have Been Added to the Navigation Bar</div>
    </div>
</div>

CSS

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

Answer 1

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
}

现在将您需要的内容添加到第一个函数