Question

我正在制作幻灯片，类似于BBC主页。我已设法创建它，以便您可以向左和向右滑动，它将在循环中无限滚动。幻灯片功能只使用无序列表，并将最后一个或第一个列表项预先添加或附加到列表中。

我的问题是我希望能够跳转到特定的幻灯片...我想不出一个好方法。任何帮助将不胜感激。

var slider = function(transition_time, transition, transition_speed, width){    

    var self = this; var slides = [];

    // Slide left or right
    this.slide = function(direction){

        $('#slideshow-wrapper li').each(function(){
            slides.push($(this).attr('id'));
        });     

        if (direction == 0)                         
            indent =  parseInt($('#slideshow-wrapper').css('left')) + width;        
        else 
            indent =  parseInt($('#slideshow-wrapper').css('left')) - width;

        $('#slideshow-wrapper:not(:animated)').animate({'left' : indent}, transition_speed, transition, function(){    

            if (direction == 0) 
                $('#slideshow-wrapper li:last').detach().fadeIn().prependTo($('#slideshow-wrapper'));

            else
                $('#slideshow-wrapper li:first').detach().fadeIn().appendTo($('#slideshow-wrapper')); 

            $('#slideshow-wrapper').css({'left' : '-' + width + 'px'});
        }); 
    }
}

根据要求，这是一个指向jsfiddle的链接。 http://jsfiddle.net/TqAdA/21/

Answer 1

首先，BBC不使用传统的jquery。它使用GLOW另一个javascript库。

但你可能想要nivo slider代替你。

Answer 2

以下是BBC如何做到这一点。使用JQuery和类。

有一个包含你的幻灯片的包装div也是div。所以div有类，如：

<div class="wrapper>
    <div id="dz-gridsport" class="pane pane-5" style="left: 976px;">
    <div id="dz-gridbbcnow" class="pane pane-0 focused" style="left: 1952px;">
    <div id="dz-gridentertainment" class="pane pane-1" style="left: 2928px;">
</div>

因此，您可以使用以下方式获取当前焦点幻灯片的索引：

var slideIndex = $(".wrapper").index($(".focused"))

以这种方式使用索引，然后您可以使用每个窗格的宽度和偏移来计算如何到达每个窗格。

希望这有帮助。

jQuery Infinite Slider，类似于BBC主页

2 个答案: