Question

我想创建一个图片库，我是为幻灯片编写的，但我不知道如何编写上一个和下一个按钮的代码。这些应该像无限循环一样工作（最后一个图像跳回到第一个）。

我该如何开始？这就是我到目前为止所做的：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("#play").click(function () {
        $("#img1").fadeOut(2000);
        $("#img2").fadeIn();
        $("#img2").fadeOut(4000);
        $("#img3").fadeIn();
    });
});
</script>
<body>
<div id=outer>
    <div id=inner>
        <img id="img1" src="img1.jpg"/>
        <img id="img2" src="img2.jpg" style="display:none"/>
        <img id="img3" src="img3.jpg" style="display:none"/>
    </div>
    <div id=button>
        <button id="bwd"><<</button>
        <button id="play"><></button>
        <button id="fwd">>></button>
    </div>
</div>
</body>

Answer 1

您可以使用 setInterval（）。此链接可以帮助您了解更多

Call function with setInterval in jQuery?

也许这可以帮到你：

http://jquery.malsup.com/cycle/

Answer 2

你将要使用javascript计时功能。类似的东西：

$('#play').click(function(){
  window.setInterval(function(){
    if($('#img1').is(:visible)){
      $("#img2").show()
      $("#img1").hide()
    }
    if($('#img2').is(:visible)){
      $('#img3').show()
      $('#img2').hide()
    }
    if($('#img3').is(:visible)){
      $('#img1').show()
      $('#img3').hide()
    }
  }, 1000);
});

你也可以缩小这个逻辑，但这可以让你掌握基本的想法。然后，如果你仔细观察下一个函数已经在代码中，它可以被提取出来并重复使用。一旦你有了下一个函数，那么后退函数将完全相反。

要回答下面的问题，您可以将img更改为具有相同的类，然后根据哪一个可见而将图像应用于显示和隐藏，以及紧接在可见的图像之后的图像：

#find the one currently being shown
$(".images:visible")

#find the one after the visible one
$(".images:visible").next()

#keep an id on the last image so that you can do something like
if($('.images:visible') == $('#last_image')){
    $('.images').first().show()
}

Answer 3

您好我创建了Carousel而没有使用任何第三方插件。如果您需要，请参阅。Reference Link

Js Code is。

 $(document).ready(function () {
    var currentPosition = 0;
    var slideWidth = 300;
    var slides = $('.slide');
    var numberOfSlides = slides.length;
    var timer = 3000;
    var img1, img2;
    var sliderLink = $("#slider a");
    var direction = 1;
    // Remove scrollbar in JS
    $('#slidesContainer').css('overflow', 'hidden');

    // Wrap all .slides with #slideInner // Float left to display horizontally, readjust .slides width
    slides.wrapAll('<div id="slideInner"></div>').css({
        'float': 'left',
        'width': slideWidth
    });

    // Set #slideInner width equal to total width of all slides
    $('#slideInner').css('width', slideWidth * numberOfSlides);

    // Insert left and right arrow controls in the DOM
    $('#slideshow').prepend('<span class="control" id="leftControl">Move left</span>').append('<span class="control" id="rightControl">Move right</span>');

    // Hide left arrow control on first load
    // manageControls(currentPosition);
    // manageSlide();
    // Create event listeners for .controls clicks
    $('#rightControl').bind('click', rightControl);
    $('#leftControl').bind('click', leftControl);
    function leftControl() {
        var butonid = 0;
        direction = 0;
        $("#slideInner").stop();
        $("#slideInner").dequeue();
        $('#timer').stop();
        $('#timer').dequeue();
        $('#leftControl').unbind('click');

        manageSlide(0, direction);
        setTimeout(function () {

            $('#leftControl').bind('click', leftControl);
        }, timer, null);


    }
    function rightControl() {
        var butonid = 1;
        direction = 1;
        $("#slideInner").stop();
        $("#slideInner").dequeue();
        $('#timer').stop();
        $('#timer').dequeue();
        $('#rightControl').unbind('click');

        manageSlide(0, direction);
        setTimeout(function () {

            $('#rightControl').bind('click', rightControl);
        }, timer, null);

    }

    var slideIndex = 0;
    var data = $("#slideInner .slide").toArray();
    $("#slideInner").empty();
    function manageSlide(auto, idButtonid) {

        $("#slideInner").empty();


        // console.log(slideIndex);

        if (idButtonid == 0) {

            $("#slideInner").css({ 'marginLeft': "-300px" });
            $(data).each(function (index) {
                //                        if (index == slideIndex - 1) {
                //                            $(this).show();
                //                        } else {
                $(this).hide();
                // }
            });
            $(data[slideIndex - 1]).show();
            if (slideIndex == numberOfSlides - 1) {
                slideIndex = 0;
                img1 = data[0];
                img2 = data[numberOfSlides - 1];

                $("#slideInner").append(img1);
                $("#slideInner").append(img2);
                $(img2).show();
                $(img1).show();

            } else {
                img1 = data[slideIndex];
                img2 = data[slideIndex + 1];
                $("#slideInner").append(img2);
                $("#slideInner").append(img1);

                $(img1).show();
                $(img2).show();
                slideIndex = slideIndex + 1;
            }



            $('#slideInner').animate({
                'marginLeft': "0px"
            }, 'slow', function () {
                $('#timer').animate({
                    opacity: 1
                }, timer, function () {
                    console.log('leftControl');
                    manageSlide(1, direction);
                });

            });
        }

        // right move here
        else if (idButtonid == 1) {
            $("#slideInner").css({ 'marginLeft': "0px" });
            $(data).each(function (index) {
                if (index == slideIndex + 1) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
            if (slideIndex == numberOfSlides - 1) {
                slideIndex = 0;
                img1 = data[0];
                img2 = data[numberOfSlides - 1];
                $("#slideInner").append(img2);
                $("#slideInner").append(img1);
                $(img2).show();
                $(img1).show();

            } else {
                img1 = data[slideIndex];
                img2 = data[slideIndex + 1];
                $("#slideInner").append(img1);
                $("#slideInner").append(img2);
                $(img1).show();
                $(img2).show();
                slideIndex = slideIndex + 1;
            }

            $('#slideInner').animate({
                'marginLeft': slideWidth * (-1)
            }, 'slow', function () {
                console.log('rightControl');
                $('#timer').animate({
                    opacity: 1
                }, timer, function () {
                    manageSlide(1, direction);
                });

            });
        }


        if (auto == 1) {


            sliderLink.each(function () {
                $(this).removeClass();
                if ($(this).text() == (slideIndex + 1)) {

                    $(this).addClass('active');
                }

            });
        }
        auto = 1;

    }



    $("#slider a").click(function () {

        sliderLink.each(function () {
            $(this).removeClass();
        });
        slideIndex = $(this).addClass('active').text() - 1;
        $('#timer').stop();
        $('#timer').dequeue();
        $("#slideInner").stop();
        $("#slideInner").dequeue();
        manageSlide(0, direction);
    });

    manageSlide(1, direction);
});

Demo Link

希望它对你有所帮助。

我想使用jquery创建具有无限循环的图库

3 个答案: