使用自定义旋转木马进行分页

Getting pagination to work with custom carousel

本文关键字：分页 旋转木马 自定义      更新时间：2023-09-26

我正试图创建一个带有分页的转盘（demo）。当用户单击底部的块时，它应该循环到相应的图像。下面的代码就是我目前拥有的代码。小心控制台的胡言乱语。现在我正在确定用户是否在可见块之后或之前单击。

//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/

你的小提琴里有很多代码，所以我创建了一个例子，你可以做些什么来展示你的图片（这有望让你开始…）：

Fiddle示例

$(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');
});
});
相关文章：