javascript - 向我的轮播添加分页（jQuery）

Question

我正在尝试向我的轮播添加一个简单的指标。目前，指标的数量不必动态生成。我正在尝试复制BBC主页上的轮播。

BBC 网站上的指标是右上角的那些橙色点。我不在乎让点成为相应幻灯片的链接，我只想让点根据您单击“上一个”或“下一个”循环

例如：（o = 指标）

<prev      [IMGS]      next>
           o o o

我的 jsFiddle：http: //jsfiddle.net/yTKyU/

Answer 1

查看更新的小提琴：http: //jsfiddle.net/yTKyU/1/

$(document).ready(function() {

//rotation speed and timer
var speed = 5000;
var run = setInterval('rotate()', speed);

//calculate width dynamically for responsive design
var starting_width = $('#slides ul li').width($('#slides').outerWidth());

//grab the width and calculate left value
var item_width = $('#slides ul li').outerWidth();
var left_value = item_width * (-1);

//move the last item before first item, just in case user click prev button
$('#slides ul li:first').before($('#slides ul li:last'));

//set the default item to the correct position 
$('#slides ul').css({
    'left': left_value
});

//if user clicked on prev button
$('#prev').click(function() {

    //get the right position            
    var left_indent = parseInt($('#slides ul').css('left')) + item_width;

    //slide the item            
    $('#slides ul:not(:animated)').animate({
        'left': left_indent
    }, 200, function() {

        //move the last item and put it as first item                
        $('#slides ul li:first').before($('#slides ul li:last'));

        //set the default item to correct position
        $('#slides ul').css({
            'left': left_value
        });

    });
    if ($('#pagination li span.current').parent().is(':first-child')) {
        $('#pagination li span.current').removeClass('current');
      $('#pagination li:last-child').children().addClass('current');
    } else {
    $('#pagination li span.current').parent().prev().children().addClass('current').addClass('new');
    $('#pagination li span.current').removeClass('current');
    $('#pagination li span.new').addClass('current').removeClass('new');
}
    //cancel the link behavior            
    return false;

});


//if user clicked on next button
$('#next').click(function() {

    //get the right position
    var left_indent = parseInt($('#slides ul').css('left')) - item_width;

    //slide the item
    $('#slides ul:not(:animated)').animate({
        'left': left_indent
    }, 200, function() {

        //move the first item and put it as last item
        $('#slides ul li:last').after($('#slides ul li:first'));

        //set the default item to correct position
        $('#slides ul').css({
            'left': left_value
        });

    });

    //change the itemlist class
    if ($('#pagination li span.current').parent().is(':last-child')) {
        $('#pagination li span.current').removeClass('current');
      $('#pagination li:first-child').children().addClass('current');
    } else {
        $('#pagination li span.current').parent().next().children().addClass('current').addClass('new');
        $('#pagination li span.current').removeClass('current');
        $('#pagination li span.new').addClass('current').removeClass('new');
    }
    //cancel the link behavior
    return false;

});

//if mouse hover, pause the auto rotation, otherwise rotate it
$('#slides').hover(

function() {
    clearInterval(run);
}, function() {
    run = setInterval('rotate()', speed);
});

});

//function to click next link
//a timer will call this function, and the rotation will begin :)  


function rotate() {
$('#next').click();
}​