Question

我是JQuery的新手所以请保持温柔。我有一个用html和css构建的新闻自动收录器，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
}

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

新闻自动收报机 - 使用下一个和上一个按钮自动更改div

1 个答案: