Question

    <div class="btn-bar">
        <div id="buttons">
            <p>by Marina</p>
            <a id="prev" href="#">&lt;</a>
            <a id="next" href="#">&gt;</a>
        </div>
    </div>
    <p><span id="original">High Life art party Neutra before they</span></p>
</section>

jq：

$("document").ready(function() {
    var texts = ["High Life art party Neutra before they", "second"];
    var i = 400;
    (function runIt() {
        i++;
        $('#original').fadeOut('slow', function(){
            $('#original').html(texts[i % texts.length]);
            $('#original').fadeIn('slow', function(){
                runIt()
            });
        });
    }());
});

Answer 1

Tnx寻求帮助！我找到了解决方案 HTML：

<div id="container">
    <ul id="slider">
        <li class="slide selected"><img src="img/icon-teacher.png">Meh ennui knausgaard skateboard forage, health goth flexitarian.</li>
        <li class="slide"><img src="img/more.png"> Four dollar toast helvetica before they sold out,<br> typewriter deep v locavore tattooed pug organic umami kombucha bushwick listicle sustainable. </li>
        <li class="slide"><img src="img/museum.png">Echo park mustache dreamcatcher, leggings austin sustainable organic locavore beard pour-over sartorial.</li>
        <li class="slide"><img src="img/cat.jpg"> Pinterest irony migas, squid paleo mixtape everyday carry neutra drinking vinegar.</li>
    </ul>
    <p id="mar">by Marina</p>
    <div class="btn-bar">

        <button id="prev">&lt;</button>
        <button id="next">&gt;</button>
        <div style="clear:both"></div>
    </div>
</div>

JQ：

// Have the first and last li's set to a variable
var $first = $('.slide:first', '#slider'),
     $last = $('.slide:last', '#slider');

$("#next").click(function () {
    var $next,
            $selected = $(".selected");
    // get the selected item
    // If next li is empty , get the first
    $next = $selected.next('.slide').length ? $selected.next('.slide') : $first;
    $selected.removeClass("selected").fadeOut('fast');
    $next.addClass('selected').fadeIn('fast');
});
$("#prev").click(function () {
    var $prev,
            $selected = $(".selected");
    // get the selected item
    // If prev li is empty , get the last
    $prev = $selected.prev('.slide').length ? $selected.prev('li') : $last;
    $selected.removeClass("selected").fadeOut('fast');
    $prev.addClass('selected').fadeIn('fast');
});
var time = 5000;
var tid = setTimeout(timer, time);

function timer() {
    var $next,
            $selected = $(".selected");
    // get the selected item
    // If next li is empty , get the first
    $next = $selected.next('.slide').length ? $selected.next('.slide') : $first;
    $selected.removeClass("selected").fadeOut('fast');
    $next.addClass('selected').fadeIn('fast');

    tid = setTimeout(timer, time); // repeat myself
}
function abortTimer() { // to be called when you want to stop the timer
    clearTimeout(tid);
}

下一个和上一个按钮在自动幻灯片放映中不起作用

1 个答案: