Question

我正在尝试使用按钮进行自动幻灯片放映。我正在使用间隔和点击功能。

我正在使用此代码，但它不起作用，DIV同时出现。有什么问题？

这里是HTML：

<div class="cajas" id="home-caja">


            <div class="apartadosh">

                <div class="diva">
                    <div class="espacioimagen">
                        <div class="fancyosop">
                            <p class="fancytitlep">News</p>
                        </div>
                        <div id="contentaboutp">
                            <p class="fancytextp">aaaaaaaaaaa</p>
                        </div>
                        <img src="../uploads/inphyxwords.png" class="fotohome" />
                    </div>
                </div>

                <div class="divb">
                    <div class="espacioimagen">
                        <div class="fancyosop">
                            <p class="fancytitlep">Web Online!</p>
                        </div>
                        <div id="contentaboutp" style="display:block">
                            <p class="fancytextp">bbbbbbbbbbbbb</p>
                        </div>
                        <img src="../uploads/41744f.png" class="fotohome" />
                    </div>                        
                </div>

            </div> <!-- Apartados -->

            <div class="navh">
                <ul>
                    <li><a href="#news" data-id="a">News</a></li>
                    <li><a href="#webonline" data-id="b">Web Online!</a></li>
                </ul>
            </div>

</div> <!-- Home caja -->

这里是Jquery：

var pregunta = "a"; //Variable to check what DIV is visible
var escondido = $(".apartadosh > div:gt(0)");
$(escondido).hide(); //Hides the second DIV
var interval = undefined;


$(document).ready(function () {
    interval = setInterval(getNext, 2000); //Interval function
    $('.navh ul li a').on('click', getDiv); //When the button is clicked
});


function getDiv() {

        var target = '.div' + $(this).attr("data-id");  

        if ($(this).attr("data-id") === pregunta) { //Check if you're clicking for the visible DIV
            return 0}

        else {

            if (activa === "0") {
                if ($(this).attr("data-id") === 'b') { //Set the variable to the current DIV ID
                    pregunta = "b"; }
                if ($(this).attr("data-id") === 'a') {
                    pregunta = "a"; }
                $(".apartadosh > div").fadeOut(1000);
                $(target).fadeIn(1000);
            }
        }

}


function getNext() {

    var $curr = $('.apartadosh div:visible'),
        $next = ($curr.next().length) ? $curr.next() : $('.apartadosh div').first();

    transition($curr, $next);

}


function transition($curr, $next) {
    clearInterval(interval);

    $curr.fadeOut(1000);
    $next.fadeIn(1000);
    });
}

Answer 1

我做到了！如果有人想要带按钮的自动幻灯片显示，请输入以下代码：D

// Home slideshow

var interval = undefined;

$(document).ready(function () {

    var escondido = $(".apartadosh > div:gt(0)");
    $(escondido).hide();
    var pregunta = "a";
    interval = setInterval(getNext, 5000);

    $(".navh ul li a").click(function () {

        var target = '.div' + $(this).attr("data-id"); 

        if ($(this).attr("data-id") === pregunta) {
            return 0}

        else {
            if ($(this).attr("data-id") === 'b') {
                pregunta = "b"; }
            if ($(this).attr("data-id") === 'a') {
                pregunta = "a"; }
            $(".apartadosh > div").fadeOut(1000);
            $(target).fadeIn(1000);
            clearInterval(interval);
            interval = setInterval(getNext, 5000);
        }

    })


    function getNext() {

        var $curr = $('.apartadosh > div:visible'),
            $next = ($curr.next().length) ? $curr.next() : $('.apartadosh div').first();

        transition($curr, $next);

    }


    function transition($curr, $next) {
        $curr.fadeOut(1000).appendTo('.apartadosh');
        $next.fadeIn(1000);
        if ($curr.attr("class") === 'divb') {
            pregunta = "a"; }
        if ($curr.attr("class") === 'diva') {
            pregunta = "b"; }
    }

});

带按钮的自动幻灯片

1 个答案: