0

我正在创建一个幻灯片，类似于 BBC 主页的幻灯片。我已经设法创建它，以便您可以左右滑动，它会在循环中无限滚动。slide 函数仅使用无序列表并将最后一个或第一个列表项添加或附加到列表中。

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

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/

4

2 回答 2

0

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

但是您可能希望您使用 nivo 滑块。

于 2012-09-24T14:46:13.503 回答
0

以下是 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"))

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

希望这可以帮助。

于 2013-01-21T16:26:39.433 回答