带有褪色文本的 Jquery 轮播

Question

Picrelated 是我正在努力解决的轮播。

通过单击“下一步”导航箭头，文本标题应首先淡出，然后图像块应向左滑动。当图像块滑动时 - 下一个标题淡入。

我曾尝试使用 Nivo Slider 和 BX Slider，但永久失败。

你能建议我任何有用的 jquery 插件或方法吗？

Answer 1

嘿试试这个代码。

  <style>
    #slideshow #slidesContainer
    {
        margin: 0 auto;
        width: 300px;
        height: 263px;
        overflow: auto; /* allow scrollbar */
        position: relative;
    }

    #slideshow #slidesContainer .slide
    {
        margin: 0 auto;
        width: 300px; /* reduce by 20 pixels to avoid horizontal scroll */
        height: 263px;
        display: none;
    }
    #slideshow #slidesContainer .slide img
    {
        margin: 0 auto;
        width: 290px; /* reduce by 20 pixels to avoid horizontal scroll */
        height: 263px;
    }


    /**
    * Slideshow controls style rules.
    */
    .control
    {
        display: block;
        width: 39px;
        height: 263px;
        text-indent: -10000px;
        position: absolute;
        cursor: pointer;
    }
    #leftControl
    {
        top: 0;
        left: 0;
        background: transparent url(http://cdn1.iconfinder.com/data/icons/fs-icons-     ubuntu-by-franksouza-/128/go-previous.png) no-repeat 0 0;
    }
    #rightControl
    {
        top: 0;
        right: 0;
        background: transparent    url(http://cdn4.iconfinder.com/data/icons/cc_mono_icon_set/blacks/48x48/sq_br_next.png) no-repeat 0 0;
    }
    .active
    {
        color: red;
    }
</style>

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

HTML 代码是

<body>
<div style="width: 560; overflow: hidden" align="center">
    <!-- Slideshow HTML -->
    <div id="timer">
    </div>
    <div id="slideshow">
        <div id="slidesContainer">
            <div class="slide">
                <!-- Content for slide 1 goes here -->
                <img src="http://www.themobileindian.com/images/nnews/2012/10/8999/Apple-logo.jpg" />
                <span>I need some he file. I have normal javascript, as well as Jquery. Here </span>
            </div>
            <div class="slide">
                <!-- Content for slide 2 goes here. -->
                <img src="http://www.maxxpotential.com/stephen2/wp-content/uploads/2013/03/Images-from-Deep-in-the-Woods-by-Astrid-Yskout-4.jpg">
                <span>I to move it to it's own file. I have normal javascript, as well as Jquery. Here
                </span>
            </div>
            <div class="slide">
                <!-- Content for slide 3 goes here. -->
                <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcSnyrnGRAcKu3bY2bLUiCDnPetbKT97o892huSfYQv148ERpRFJ" />
                <span>I need some help with this... I wrote all of my javascript code within the .html
                    file withing the brackets. I need to move it to it's own file. I have normal javascript,
                    as well as Jquery. Here </span>
            </div>
            <div class="slide">
                <img src="http://i.livescience.com/images/i/000/034/622/i02/bioscapes3.jpg" />
                <span>within the .html file withing the brackets. I need to move it to it's own file.
                    I have normal javascript, as well as Jquery. Here </span>
            </div>
            <div class="slide">
                <img src="http://www.thinkstockphotos.in/CMS/StaticContent/WhyThinkstockImages/Best_Images.jpg" />
                <span>I need some help with this.. have normal javascript, as well as Jquery. Here
                </span>
            </div>
        </div>
        <div id="slider">
            <a href="javascript:void(0)">1</a> <a href="javascript:void(0)">2</a> <a href="javascript:void(0)">
                3</a> <a href="javascript:void(0)">4</a> <a href="javascript:void(0)">5</a>
        </div>
    </div>
    <!-- Slideshow HTML -->
</div>

如需演示，请在此处导航....See Demo