Question

我一直在尝试使用jQuery创建一个简单的图像滑块，但是下一个/上一个按钮结果是一个问题。我不知道如何防止因垃圾邮件或按下它们太快而导致的各种错误和故障。这是代码

http://jsfiddle.net/6tkquyn1/2/ ...有人可以帮忙吗？

HTML

<div id="slider">
                        <div id="arrowleft" class="slidernav"></div>
                        <div id="arrowright" class="slidernav"></div>
                        <img class="slide" id="slide1" src="http://s27.postimg.org/rquk1bk37/slide1.jpg">
                        <img class="slide" id="slide2" src="http://s3.postimg.org/5baw2ey6b/slide2.jpg">
                        <img class="slide" id="slide3" src="http://s18.postimg.org/jej03064p/slide3.jpg">
                        <img class="slide" id="slide4" src="http://s22.postimg.org/ubbx4ev4h/slide4.jpg">

CSS

*{
         magin: 0px;
         padding: 0px;
        }

        #slider
        {
         height: 350px;
         width: 700px;
         border: solid black 2px;
         position: relative;
        }

        .slide
        {
         position: absolute;
         overflow: hidden;
         display: none;
        }

        .slidernav
        {
         z-index: 999;
         opacity: 0;
         position: absolute;
         cursor: pointer;
         transition: .5s;
        }

        .slidernav:hover
        {
         opacity: 0.8;
        }

        #arrowright
        {
         height: 350px;
         width: 70px;
         right: 0;
         background-image: url(http://s1.postimg.org/hx6atzftb/arrowright.png);
        }

        #arrowleft
        {
         height: 350px;
         width: 70px;
         left: 0;
         background-image: url(http://s22.postimg.org/5fn2unxu9/arrowleft.png);
        }

JS

$(document).ready(function(){

            $("#slide1").show("fade",800);

            var interval;
            var counter = 1;
            var slideNumber = $("#slider img").size();

            function startSlider () {interval = setInterval(function(){

                                        $("#slide"+counter).hide("slide",{direction:"left"},800);

                                        if(counter==slideNumber){counter = 1;}
                                        else{counter = counter+1;}
                                        $("#slide"+counter).show("slide",{direction:"right"},800);},4800);}
            startSlider();

            function pauseSlider() {clearInterval(interval);}

            $(".slide").on("mouseover", pauseSlider).on("mouseleave", startSlider);

                    $('#arrowleft').click(
                    function () {
                    $('.slide').queue();
                    pauseSlider();
                    $('#slide'+ counter).hide("slide",{direction: "right"},800);
                    if(counter==1){counter = slideNumber;}
                    else{counter = counter-1;}
                    $('#slide'+ counter).show("slide",{direction: "left"},800);
                    startSlider();
                });

                $('#arrowright').click(
                    function () {
                    $('.slide').queue();
                    pauseSlider();
                    $('#slide'+ counter).hide("slide",{direction: "left"},800);
                    if(counter == slideNumber){counter = 1;}
                    else{counter = counter+1;}
                    $('#slide'+ counter).show("slide",{direction: "right"},800);
                    startSlider();
                });


        });

Answer 1

尝试在css中使用以下内容

'* { magin：0px; 填充：0px; }

        #slider
        {
         height: 350px;
         width: 700px;
         border: solid black 2px;
         position: relative;
        }

        .slide
        {
         position: absolute;
         overflow: hidden;
         display: none;
        }

        .slidernav
        {
         z-index: 999;
         opacity: 0;
         position: absolute;
         cursor: pointer;
         transition: .5s;
        }

        .slidernav:hover
        {
         opacity: 0.8;
        }

        #arrowright
        {
         height: 350px;
         width: 70px;
         left:440px;
         background-image: url(http://s1.postimg.org/hx6atzftb/arrowright.png);
        }

        #arrowleft
        {
         height: 350px;
         width: 70px;
         left: 0;
         background-image: url(http://s22.postimg.org/5fn2unxu9/arrowleft.png);
        }`

我刚换成“右：0;”用“left：440px;”在#arrowright。它现在正在运作。

Answer 2

好的，您可以通过测试来确定上一张幻灯片是否已完全转换为视图。您可以使用jQuery测试：$（...）。is（'：visible'）。这里有一些原始代码的更改：

1）现在有一个lastCounter，可以在允许用户更改幻灯片之前跟踪需要隐藏的幻灯片。只要幻灯片转换，就会更新。

2）幻灯片更改回调现在检查动画是否完整，然后再允许用户更改图像。

$(document).ready(function () {

    $("#slide1").show("fade", 800);

    var interval;
    var counter = 1;
    var lastCounter = 2;
    var slideNumber = $("#slider img").size();

    function startSlider() {
        interval = setInterval(function () {
            $("#slide" + counter).hide("slide", { direction: "left" }, 800);

            lastCounter = counter;
            if (counter == slideNumber) {
                counter = 1;
            } else {
                counter = counter + 1;
            }

            $("#slide" + counter).show("slide", { direction: "right" }, 800);
        }, 4800);
    }
    startSlider();

    function pauseSlider() {
        clearInterval(interval);
    }

    $(".slide").on("mouseover", pauseSlider).on("mouseleave", startSlider);

    $('#arrowleft').click(function() {
        if ($('#slide' + lastCounter).is(":visible")) {
            return;
        }

        $('.slide').queue();
        pauseSlider();
        $('#slide' + counter).hide("slide", { direction: "right" }, 800);
        lastCounter = counter;
        if (counter == 1) {
            counter = slideNumber;
        } else {
            counter = counter - 1;
        }
        $('#slide' + counter).show("slide", { direction: "left" }, 800);
        startSlider();
    });

    $('#arrowright').click(function() {
        if ($('#slide' + lastCounter).is(":visible")) {
            return;
        }

        $('.slide').queue();
        pauseSlider();
        $('#slide' + counter).hide("slide", { direction: "left" }, 800);
        lastCounter = counter;
        if (counter == slideNumber) {
            counter = 1;
        } else {
            counter = counter + 1;
        }
        $('#slide' + counter).show("slide", { direction: "right" }, 800);
        startSlider();
    });
});

jquery图像滑块的问题

2 个答案: