Question

我有一个简单的jquery滑块可以很好地处理图像，但不能使用正在使用的div而不是图像进行滑动。当我查看所有可用的div时，当我单击后退按钮查看上一个div时，它会以某种方式中断... 它可能有什么问题？我错过了什么吗？

另外，您能否建议我如何获得此滑块的动画视图（如幻灯片效果 - 过渡）？

这是demo.html： http://jsfiddle.net/sathish_panduga/qybpaa6x/1/

以下是jquery代码：

    $(document).ready(function () {
        // Hide all DIVs wrapped within .carousel
        $('.carousel div').hide();
        /**
         * Show first slide
         * If you want to display another child, just replace
         * :first-child by :nth-child(n) where n is an integer
         */
        $('.carousel div:first-child').show();
        // Hide previous button if we're on the first slide
        if ($('.carousel div:visible').is(':first-child')) {
            $('.btn-prev').hide();
        }
        // Listen button clicks
        $('.btn-dir').click(function () {
            // Hide next button on the last slide
            if ($('.carousel div:visible').next().is(':last-child')) {
                $('.btn-next').hide();
            }
            // If button next is clicked display next slide
            if ($(this).attr('class') == 'btn-dir btn-next') {
                if ($('.carousel div:visible').next().length > 0) {
                    $('.btn-prev').show();
                    $('.carousel div:visible').toggle().next().toggle();
                }
            }
            // If button prev is clicked display previous slide
            if ($(this).attr('class') == 'btn-dir btn-prev') {
                if ($('.carousel div:visible').prev().length > 0) {
                    $('.btn-next').show();
                    $('.carousel div:visible').toggle().prev().toggle();
                }
                // If we reached the first slide, hide prev button
                if ($('.carousel div:visible').is(':first-child')) {
                    $('.btn-prev').hide();
                }
            }
        });
    });

HTML：

<div class="wrapper">
    <div class="carousel">
        <div class="slide slide-left">
            <div class="div_sec">
                <h1>TEST1</h1>
                <input type="text" value="TEST" />
                <button>SUBMIT</button>
            </div>            
        </div>
        <div class="slide slide-middle">
            <div class="div_sec">
                <h1>TEST2</h1>
                <input type="text" value="TEST" />
                <button>SUBMIT</button>
            </div>
        </div>
        <div class="slide slide-right">
            <div class="div_sec">
                <h1>TEST3</h1>
                <input type="text" value="TEST" />
                <button>SUBMIT</button>
            </div>
        </div>
        <div class="slide slide-right">
            <div class="div_sec">
                <h1>TEST4</h1>
                <input type="text" value="TEST" />
                <button>SUBMIT</button>
            </div>
        </div>

    </div>
</div>
<div class="direction">
    <button class="btn-dir btn-next">></button>
    <button class="btn-dir btn-prev"><</button>
</div>

Answer 1

<强> DEMO HERE

对您现有的轮播功能进行了一些更改：

在可见active class添加了element，sliding
时很容易识别
添加了fadeIn和fadeOut动画。

$(document).ready(function(){
    $('.carousel div').hide();
    $('.carousel div:first-child').show().addClass('active');
    //add active class to first element
    // Hide previous button if we're on the first slide
    if( $('.carousel .slide.active').is(':first-child') ) {
        //check with active class existence
        $('.btn-prev').hide();
    }
    $('.btn-dir').click(function(){
        if(!$('.carousel .slide.active').next('.slide').length) {
            $('.btn-next').hide();
        }

        //Use hasclass instead of attr('class')
        if( $(this).hasClass('btn-next') ) {
            if($('.carousel .slide.active').next('.slide').length) {
                $('.btn-prev').show();
                $('.carousel .slide.active').fadeOut('slow',function(){
                //Perform other operations like removing active class and fading in other element
                //once fadeOut is done
                    $('.slide.active').removeClass('active').next('.slide').addClass('active').fadeIn('fast')
                    if(!$('.carousel .slide.active').next('.slide').length) {
                        $('.btn-next').hide();
                    }
                })
            }

        }
        // If button prev is clicked display previous slide
        if($(this).hasClass('btn-prev')) {
            if($('.carousel .slide.active').prev('.slide').length) {
                $('.btn-next').show();
                $('.carousel .slide.active').fadeOut('slow',function(){
                    $('.slide.active').removeClass('active').prev('.slide').fadeIn('fast').addClass('active')
                    if(!$('.carousel .slide.active').prev('.slide').length) {
                        $('.btn-prev').hide();
                    }
                })
            }
        }
    });
});

滑块不适用于div但适用于图像

1 个答案: