开发者

Cycle through remote javascripts to create multiple weather feeder

开发者 https://www.devze.com 2023-01-10 01:24 出处:网络
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'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.

0

精彩评论

暂无评论...
验证码 换一张
取 消