ersuchen Sie, dieses Karussell zu sehen, das unendliche Runden fährt. Nach dem letzten Bild wird das erste Bild wieder angezeigt, und vor dem ersten wird das letzte Bild angezeigt.

Wurde dieses @ verwend

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