Question

下面是我在StackOverflow上找到的一些简单jQuery内容滑块的代码。

    // Scroll vars
    var currentPosition = 0;
    var slideWidth = 615;
    var slides = $('.slide');
    var numberOfSlides = slides.length;

    // Remove scrollbar in JS
    $('.slide-wrapper').css('overflow', 'hidden');

    // Wrap all .slides with #slideInner div
    slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
    .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')
    .append('<span class="control" id="leftControl">Left</span>')
    .append('<span class="control" id="rightControl">Right</span>');

    // Hide left arrow control on first load
    manageControls(currentPosition);

    // Create event listeners for .controls clicks
    $('.control').bind('click', function(){
        // Determine new position
        currentPosition = ($(this).attr('id')=='rightControl')
        ? currentPosition+1 : currentPosition-1;

        // Hide / show controls
        manageControls(currentPosition);
        // Move slideInner using margin-left
        $('#slideInner').animate({
            'marginLeft' : slideWidth*(-currentPosition)
        });
    });

    // manageControls: Hides and shows controls depending on currentPosition
    function manageControls(position){
        // Hide left arrow if position is first slide
        if(position==0){ $('#leftControl').hide() }
        else{ $('#leftControl').show() }
        // Hide right arrow if position is last slide
        if(position==numberOfSlides-1){ $('#rightControl').hide() }
        else{ $('#rightControl').show() }
        }

相应的HTML：

                    <div class="slideshow">
                        <div class="slide-wrapper">
                            <div class="slide">
                                <p>Content</p>
                            </div>
                            <div class="slide">
                                <p>Content</p>
                            </div>
                            <div class="slide">
                                <p>Content</p>
                            </div>
                            <div class="slide">
                                <p>Content</p>
                            </div>
                        </div>
                    </div>

但是，我需要在同一页面上添加另一个内容滑块部分（即div class =“slideshow2”）。有没有一种简单的方法可以重用相同的函数而不是复制大部分的javascript？

Answer 1

这应该让你开始。必须删除对id的所有引用并用JavaScript变量替换它们。 The JSFiddle。为每个'幻灯片放映'调用函数slideme：

function slideme(slideNode) {
    // Scroll vars
    var currentPosition = 0;
    var slideWidth = 615;
    var slides = $('.slide', slideNode);
    var numberOfSlides = slides.length;

    // Remove scrollbar in JS
    $('.slide-wrapper', slideNode).css('overflow', 'hidden');

    // manageControls: Hides and shows controls depending on currentPosition
    function manageControls(position, leftControl, rightControl){
        // Hide left arrow if position is first slide
        if(position===0){ leftControl.hide(); }
        else{ leftControl.show(); }
        // Hide right arrow if position is last slide
        if(position==numberOfSlides-1){ rightControl.hide(); }
        else{ rightControl.show(); }
    }


    // Wrap all .slides with #slideInner div

    var slideOuter = slides.wrapAll('<div></div>')
    // Float left to display horizontally, readjust .slides width
    .css({
        'float' : 'left',
        'width' : slideWidth
    });

    var slideInner = slideOuter.parent();
    slideInner.css('width', slideWidth * numberOfSlides);

    // Insert left and right arrow controls in the DOM
    var lc = $('<span class="control">Left</span>');
    $(slideNode).append(lc);
    lc.bind('click', function() {
        currentPosition -= 1;
        manageControls(currentPosition, lc, rc);
        // Move slideInner using margin-left
        slideInner.animate({
            'marginLeft' : slideWidth*(-currentPosition)
        });    
    });
                                                                                var rc = $('<span class="control">Right</span>');
    $(slideNode).append(rc);
    rc.bind('click', function() {
        currentPosition += 1;
        manageControls(currentPosition, lc, rc);
        // Move slideInner using margin-left
        slideInner.animate({
            'marginLeft' : slideWidth*(-currentPosition)
        });
    });  

    // Hide left arrow control on first load
    manageControls(currentPosition, lc, rc);
}

假设您使用ids'mpallshow1'和'slideshow2'创建了两个幻灯片，这将设置它们：

slideme($("#slideshow1"));
slideme($("#slideshow2"));

同一页面上有多个jQuery Content Slider

1 个答案: