jquery 图片滑块的问题

Question

我一直在尝试使用 jQuery 创建一个简单的图像滑块，但 next/previous 按钮却成了问题。我不知道如何防止因向它们发送垃圾邮件或按得太快而引起的各种错误和故障。这是代码

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

中使用以下内容

`*{ 保证金：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);
        }`

我刚刚在#arrowright 中用 "left: 440px;" 替换了 "right: 0;"。现在正在运行。

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 图片滑块的问题

Problems with jquery image slider

jquery

slideshow