BPOVIA Website Design

First, the presentation of the HTML part (with its own specific css style defined), each message with <span> </ span> enclose (of course you can use <li> </ li>, change it to html and jQuery code)

<div class="test1">
<! – Style = "display: none ;"—- style.css ->
<span> *****</ span>
<span style="display:none;"> *****</ span>
<span style="display:none;"> *****</ span>
<p id="prev"> «</ p>
<p id="next"> »</ p>
</ div>

Second, jQuery code sections (more complex than before, but the results always have to sacrifice points to Well)

jQuery (document). ready (function () {/ / jQuery information on the rotation effect by zwwooooo
    $ ('# prev'). click (function () {
    $ ('. test1 span: visible'). fadeOut ('fast',
    function () {
    if ($ (this). prev (). is ('span')) {
    $ (this). prev (). fadeIn ('fast');
    } Else {
    $ (". test1 span: last"). fadeIn ('fast');
    }
    });
    });
    $ ('# next'). click (function () {
    $ ('. test1 span: visible'). fadeOut ('fast',
    function () {
    if ($ (this). next (). is ('span')) {
    $ (this). next (). fadeIn ('fast');
    } Else {
    $ ('. test1 span: first'). fadeIn ('fast');
    }
    });
    });
    var b,
    a = function () {
    $ ('# next'). trigger ('click'); / / copy click time
    b = setTimeout (a, 5000); / / 5 秒 rotation, the same
    };
    $ ('. test1'). hover (function (){// when the mouse hovers
    clearTimeout (b); / / stop the rotation
    }
    function () {
    b = setTimeout (a, 5000);
    });
    b = setTimeout (a, 5000);
});