Question

尝试在同一页面上添加2个轮播滑块... 但是，当我复制下面的代码并使用其他滑块名称进行编辑时，只有最后一个正常工作！ JS是：

$(document).ready(function() {

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

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

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

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

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

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

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

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

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

        });

        //cancel the link behavior            
        return false;
    });

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

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

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

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

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

        });

        //cancel the link behavior
        return false;
    });

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

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

//a simple function to click next link
//a timer will call this function, and the rotation will begin :)  
function rotate() {
    $('#next', '#next_2').click();
}

我从这个网站得到了这个代码： http://www.queness.com/post/923/create-a-simple-infinite-carousel-with-jquery 有人可以帮忙吗？

Answer 1

多个选择器的正确jQuery语法是：

$('#slides li, #slides_2 li')...

也就是说，那里有数十亿个免费的旋转木马，它们被完全抽象化，完全避免了整个混乱局面。

http://bxslider.com

http://getbootstrap.com/javascript/#carousel

同一页面上有2个旋转木马滑块

1 个答案: