无限轮播不起作用

Question

试着看看这个旋转木马无限循环。在最后一张图片之后会再次看到第一张图片，在第一张之前会看到最后一张图片。

用过这个

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/

Answer 1

我无法发表评论。但是你可以让每个 li 都有一个 id。然后得到li的长度。然后按照史莱姆的建议去做。

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

嗯，这就是我的方法。抱歉帮不上什么忙。

无限轮播不起作用

Infinite carousel doesnt work

html

css

jquery

carousel