Infinite carousel doesnt work

问题

Trying see this carousel doing infinite laps. After the last image will see the first image again and before the first see the last image.

Was used this

Jquery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

$(document).ready(function() {  

        $('#carousel_ul li:first').before($('#carousel_ul li:last'));  

        $('#right_scroll img').click(function(){  

            var item_width = $('#carousel_ul li').outerWidth() + 10;  

            var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;  

            $('#carousel_ul').animate({'left' : left_indent},{queue:false, duration:500},function(){  

                $('#carousel_ul li:last').after($('#carousel_ul li:first'));  

                $('#carousel_ul').css({'left' : '-210px'});  
            });  
        });  


        $('#left_scroll img').click(function(){  

            var item_width = $('#carousel_ul li').outerWidth() + 10;  

            var left_indent = parseInt($('#carousel_ul').css('left')) + item_width;  

            $('#carousel_ul').animate({'left' : left_indent},{queue:false, duration:500},function(){  

            $('#carousel_ul li:first').before($('#carousel_ul li:last'));  

            $('#carousel_ul').css({'left' : '-210px'});  
            });  

        });  
  });

CSS

#carousel_inner { float:left; width:90%; overflow: hidden; }
#carousel_ul {position:relative; left:-210px; list-style-type: none; margin: 0px; padding: 0px; width:9999px; padding-bottom:10px;}
#carousel_ul li{float: left;width:200px; padding:0px; height:110px;background: #FFF;margin-top:10px;margin-bottom:10px;margin-left:5px;margin-right:5px;}
#carousel_ul li img {.margin-bottom:-4px; cursor:pointer; cursor: hand; border:0px;}
#left_scroll, #right_scroll{float:left; height:130px; width:5%;}
#left_scroll img, #right_scroll img{cursor: pointer; cursor: hand;}

http://jsfiddle.net/w35p0xdy/

回答1:

I can't comment. But you could have each li's have an id. And then get the length of li. And then do what slime has suggested.

//Load 1st li.
var i = 1;
var no_of_li = $("#carousel_ul li").length;

//On right img click
if(i % no_of_li == 0){
    i=1;
    //Load 1st element.
} else {
    i++;
    //Load i'th element
}

//On left img click
if(i == 1){
    i = no_of_li;
    //load ith element
} else {
    i--;
    //Load ith element
}

Well that's what my approach would be. Sorry if I can't be of much help.

来源：https://stackoverflow.com/questions/28180761/infinite-carousel-doesnt-work

标签

jquery

html

css

html5

carousel