新聞自動收報機 - 自動更改與下一個和前一個按鈕的div

我是JQuery的新手，所以請溫和。我有一個在html和css中使用JQuery激活下一個和上一個按鈕的新聞自動收報器。我期待讓div在加載時自動播放，但仍然允許用戶使用導航按鈕。我似乎能夠讓導航或自動播放工作，但不能在一起。任何人都可以幫助我的機會。我知道我錯過了一些大事，但我似乎無法弄清楚。我的代碼可以在這裏看到 -新聞自動收報機 - 自動更改與下一個和前一個按鈕的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); 
} 
}); 
});

來源

2015-11-08 3ncrypt3D

您已經在導航按鈕單擊上的訂閱源。現在你可以創建一個'setInterval'，它會循環一段時間，然後點擊必要的按鈕。同樣停下來，你可以在懸停時「清除間隔」。這應該工作。 – Rajesh

非常感謝。感謝您指點我正確的方向。我甚至添加了clearIntraval以暫停懸停。任何關於如何通過xml文件更新內容的想法。 – 3ncrypt3D

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 
}

現在將所需的內容添加到第一個功能

來源

2015-11-08 14:41:45 lyRx

新聞自動收報機 - 自動更改與下一個和前一個按鈕的div

回答

相關問題