Question

如何使用jQuery创建垂直滑块？这是我到目前为止所得到的：

HTML：

<div id="vslider">
    <div id="vslidernav">
        <ul>
            <a id="1"><li>Box 1</li></a>
            <a id="2"><li>Box 2</li></a>
            <a id="3"><li>Box 3</li></a>
            <a id="4"><li>Box 4</li></a>
            <a id="5"><li>Box 5</li></a>
        </ul>
    </div>
    <div id="vsliderboxes">
        <div id="box1" class="active"><h1>Clean Interface Design</h1></div>
        <div id="box2" class="inactive"><h1>Efficient Code For Faster Loads</h1></div>
        <div id="box3" class="inactive"><h1>Work Within Any Budget</h1></div>
        <div id="box4" class="inactive"><h1>Less Time Building, More Time Using</h1></div>
        <div id="box5" class="inactive"><h1>Powerful Applications</h1></div>
    </div>
</div>

jQuery的：

$(function(){

    boxheight = $('.box').height()
    nextbox = $('.active').next()

    function clickslide(){
    };

    function autoslide(){
        $(nextbox).animate(function(){scrollTop: boxheight}).addClass('active').prev().removeClass('active')
    };

    $('#vslidernav ul a').click(clickslide)
    window.setInterval(autoslide, 2000)

});

为什么不起作用？变量'next box'选择活动框，然后选择紧随其后的框。然后autoslide功能应该向下滑动。然后它为自己提供活动类并将其从前一个框中删除。

但它不起作用！为什么？感谢。

Answer 1

演示：http://jsfiddle.net/vkA2w/4/

//cache the box elements so we don't have to look them up every iteration
var $vsliderboxes = $('#vsliderboxes').children();
function autoslide(){

    //get the current active box
    var $active = $vsliderboxes.filter('.active');

    //check to see if the current active box is the last in the slider
    if ($active.index() === ($vsliderboxes.length - 1)) {
        //we need to loop back to the beginning
        var $next = $vsliderboxes.eq(0);
    } else {
        var $next = $active.next();
    }

    //slide the active slide out of view, when that is done, remove the active class from the element
    $active.slideUp(300, function () {
        $active.removeClass('active');
    });

    //slide the next slide into view, when that is done, add the active class to the element
    $next.slideDown(300, function () {
        $next.addClass('active');
    });
}

<强>更新

作为奖励，这是一种使导航链接有效的方法：

function clickslide(){
    clearInterval(intervalTimer);
    clearTimeout(timeoutTimer);
    timeoutTimer = setTimeout(function () {
        intervalTimer = window.setInterval(autoslide, 2000);
    }, 2500);
    var $active = $('.active'),
        $next   = $vsliderboxes.eq($(this).index());
    if ($active[0].id !== $next[0].id) {
        $active.slideUp(300, function () {
            $active.removeClass('active');
        });
        $next.slideDown(300, function () {
            $next.addClass('active');
        });
    }
}

var intervalTimer = window.setInterval(autoslide, 2000),
    timeoutTimer;

<强>更新

好的上次更新，这是一个演示：http://jsfiddle.net/vkA2w/8/

JS -

$(function(){

    //cache all necessary elements, notice the use of the `var` statement so we don't create global variables for no reason
    var $vsliderboxes = $('#vsliderboxes'),
        $vslidernav   = $('#vslidernav'),
        boxHeight     = $vsliderboxes.height(),
        current_index = 0;

    function clickslide(){

        //stop the slideshow for a bit so we don't get two animations too close together
        clearInterval(intervalTimer);
        clearTimeout(timeoutTimer);
        timeoutTimer = setTimeout(function () {
            intervalTimer = window.setInterval(autoslide, 2000);
        }, 2500);

        //first get the index of the clicked link
        var index = $(this).index();

        //set the current_index variable to keep track of the current index
        current_index = index;

        //then animate
        $vsliderboxes.children().stop().animate({
            top : (boxHeight * index * -1)
        }, 500);
    }

    function autoslide(){

        //increment the current index
        current_index++;

        //loop back to the beginning if necessary
        if (current_index >= $vsliderboxes.children().children().length) {
            current_index = 0;
        }

        //trigger a click on the proper index of nav elements to start the animation, this saves having to write the animation code twice
        $vslidernav.find('a').eq(current_index).trigger('click');
    }

    $vslidernav.find('a').click(clickslide);

    //save the interval timer to a variable so it can be canceled
    var intervalTimer = window.setInterval(autoslide, 2000),
        timeoutTimer  = null;

});

HTML -

<div id="vsliderboxes">
    <div id="vsliderboxs-inner">
        <div id="box1" class="active"><h1>Clean Interface Design</h1></div>
        <div id="box2" class="inactive"><h1>Efficient Code For Faster Loads</h1></div>
        <div id="box3" class="inactive"><h1>Work Within Any Budget</h1></div>
        <div id="box4" class="inactive"><h1>Less Time Building, More Time Using</h1></div>
        <div id="box5" class="inactive"><h1>Powerful Applications</h1></div>
    </div>
</div>

CSS -

#vsliderboxs-inner {
    position : relative;
    width    : 900px;
    height   : 250px;
}
#vsliderboxes {
    position : relative;
    overflow : hidden;
}

Answer 2

也许可以考虑尝试这个JQuery Tools Scrollable

用jQuery创建一个垂直滑块

2 个答案: