0

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

我应该如何开始？这是我到目前为止所拥有的：

<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>
4

3 回答 3

1

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

在jQuery中使用setInterval调用函数？

可能这也可以帮助你：

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

于 2013-06-14T05:59:51.350 回答
0

您将要使用 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);
});

你也可以把这个逻辑浓缩下来，但这会让你得到基本的想法。然后，如果您仔细查看 next 的功能已经在代码中，并且可以提取并重用它。一旦你有了下一个函数，后面的函数就会完全相反。

要在下面回答您的问题，您可以将 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()
}
于 2013-06-14T05:53:34.497 回答
0

嗨，我在没有使用任何第三方插件的情况下创建了 Carousel。如果您愿意，请参考。参考链接

Js代码是。

 $(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);
});

演示链接

希望它可以帮助你。

于 2013-06-14T06:07:26.307 回答