Question

我无法让我的旋转木马工作！一切都工作得很好，除了应该不断重复幻灯片的无限部分。当我到达最后一张幻灯片时，之后的每张幻灯片都是空白的。

这是我得到的。

//move the last list item before the first item. The purpose of this is if the user clicks previous he will be able to see the last item.
$('#carousel_ul li:first').before($('#carousel_ul li:last'));

//when user clicks the image for sliding right
setInterval(function() {

    //get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
    var item_width = $('#carousel_ul li').outerWidth() + 10;

    //calculate the new left indent of the unordered list
    var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;

    //make the sliding effect using jquery's anumate function '
    $('#carousel_ul').animate({'left' : left_indent},{queue:false, duration:2500},function(){

        //get the first list item and put it after the last list item (that's how the infinite effects is made) '
        $('#carousel_ul li:first').before($('#carousel_ul li:last'));

        //and get the left indent to the default -210px
        $('#carousel_ul').css({'left' : '-210px'});
    });
}, 2600);

我的HTML

<div class="row-fluid inner-carousel">
            <ul id="carousel_ul">
                <li><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/magazine.jpg" alt=""></li>
                <li><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/magazine.jpg" alt=""></li>
                <li><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/magazine.jpg" alt=""></li>
                <li><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/magazine.jpg" alt=""></li>
                <li><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/magazine.jpg" alt=""></li>
                <li><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/magazine.jpg" alt=""></li>
                <li><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/magazine.jpg" alt=""></li>
                <li><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/magazine.jpg" alt=""></li>
                <li><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/magazine.jpg" alt=""></li>
                <li><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/magazine.jpg" alt=""></li>
                <li><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/magazine.jpg" alt=""></li>
                <li><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/magazine.jpg" alt=""></li>
                <li><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/magazine.jpg" alt=""></li>
                <li><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/magazine.jpg" alt=""></li>
            </ul>
        </div>

使jQuery轮播无限

0 个答案: