Cycle through remote javascripts to create multiple weather feeder
I'm using a weather feed to show weather on a page. I want to cycle through 2 or more weather locations at, say, 5 second intervals.
I thought I could adapt something like this How can I cycle through pages? but haven't had any luck.
The source code is as follows for 3 feeds that I would like to continually cycle through at interval:
<script type="text/javascript" src="http://www.weatherzone.com.au/woys/graphic_current.jsp?postcode=3000"></script>
<script type="text/javascript" src="http://www.weatherzone.com.au/woys/graphic_current.jsp?postcode=3690"></script>
<script type="text/javascript" src="http://www.w开发者_JAVA百科eatherzone.com.au/woys/graphic_current.jsp?postcode=2000"></script>
Thanks in advance.
Since those widgets use document.write(), i would just output all three to the page initially, in an unordered list maybe, and just cycle through showing and hiding them.
So, using markup like this:
<ul id="cycle">
<li><script type="text/javascript" src="http://www.weatherzone.com.au/woys/graphic_current.jsp?postcode=3000"></script></li>
<li><script type="text/javascript" src="http://www.weatherzone.com.au/woys/graphic_current.jsp?postcode=3690"></script></li>
<li><script type="text/javascript" src="http://www.weatherzone.com.au/woys/graphic_current.jsp?postcode=2000"></script></li>
</ul>
You could use jQuery to do something like this:
jQuery(function($) {
var items = $('#cycle li'), // elements to be cycled through
interval = 2000, // time between cycles
i = 0;
// hides all the elements, except the first one
items.not(":first").each(function () {$(this).hide()})
// show, hide elements every "interval" milliseconds
window.setInterval(function() {
$(items[ (i==0) ? (items.length - i) - 1 : i - 1 ]).hide()
$(items[i++]).show();
if (!items[i]) i = 0;
}, interval);
});
Nice work Chris. Worked an absolute treat.
精彩评论