Question

我正在尝试使用分页创建轮播（ demo ）。当用户单击底部的块时，它应循环到相应的图像。 以下代码是我目前拥有的。介意控制台mumdo jumbo。现在我正在确定用户是否在可见块之后或之前点击。

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

//if user clicks on pagination block
$('#pagination ul li').click(function() {
    var $this = $(this);
    var temp = $(this).index() + 1;
    var current = $('#pagination li a.active').parent().index() + 1; // console.log(current + " : " + temp );

    if (current <= temp) {
        // get difference of temp and current (temp - current)
        var jump = Math.abs(temp - current);

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

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

            //active pagination
            $('#pagination li a.active').removeClass('active');
            $this.children().addClass('active');

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

            //set the default item to correct position
            $('#slides ul').css({'left' : left_value}); 
            //debugging nonsense
            console.log( "left_indent: " + left_indent + "px" + "\n" + "left_value: " + left_value + "px" + "\n" + "current slide: " + current + "\n" + "future slide: " + temp + "\n" + "difference: " + jump);

        });

    } else if (current >= temp) {
        // get difference of temp and current (temp - current)
        var jump = Math.abs(temp - current);

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

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

            //active pagination
            $('#pagination li a.active').removeClass('active');
            $this.children().addClass('active');

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

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

            //debugging nonsense
            console.log( "left_indent: " + left_indent + "px" + "\n" + "left_value: " + left_value + "px" + "\n" + "current slide: " + current + "\n" + "future slide: " + temp + "\n" + "difference: " + jump);

        });

    }

});

我尝试过获得温度和电流的差异：

var jump = Math.abs(temp - current);

然后将两者相乘

$('#slides ul').animate({'left' : left_indent * jump}, 300, function () { 
$('#slides ul').css({'left' : left_value * jump});

跳跃，但它不起作用。几次跳跃后我得到一个空白区域。

我似乎无法针对left_indent，left_value和分页之间的关系。任何帮助表示赞赏。

jsFiddle：http://jsfiddle.net/hyTeq/

Answer 1

你的小提琴中有很多代码，所以我创建了一个例子来展示你的照片（这有望让你开始......）：

Fiddle example

$(document).ready(function(){
$('.container div:first').addClass('active');
$('.container div:not(.active)').hide();
$('.pagination div').click(function(){
//Get the index of pagination and store it in VAR
var getPaginationIndex = $(this).index();
//alert(getPaginationIndex);
$('.active').hide().removeClass('active');
//get div and apply stored index of clicked pagination
//and show it...
$('.container div').eq(getPaginationIndex).show().addClass('active');
});
});

获得分页与自定义轮播一起使用

1 个答案: