使用jQuery的旋转木马

我知道那里有可用的插件，但是我正在尝试制作一个，但在此之前，我正在努力理解将其作为无限/圆形旋转木马的概念。 到目前为止，这是我的jsfiddle .. http://jsfiddle.net/hbk35/KPKyz/3/

HTML：

 
 
 
0
 
 
 
1
 
 
 
2
 
 
 
3
 
 
 
4
 
 
 
5
 
 
 
6
 
 
 
7
 
 
 
 
 
 left right  

JS：

 var container = $("#carousel_wrapper"); var runner = container.find('ul'); var liWidth = runner.find('li:first').outerWidth(); var itemsPerPage = 3; var noofitems = runner.find('li').length; runner.width(noofitems * liWidth); container.width(itemsPerPage*liWidth); $('#right').on('click',function(){ runner.animate({scrollLeft: -liWidth},1000); }); $('#left').on('click',function(){ runner.animate({scrollLeft: liWidth},1000); }); 

CSS：

 div#carousel_wrapper{ overflow:hidden; position:relative; } ul { padding:0px; margin:0px; } ul li { list-style:none; float:left; } ul li div { border:1px solid white; width:50px; height:50px; background-color:gray; } 

我不想使用克隆和分离方法。 还有其他办法吗？ 请有人在我错误的地方指导我。 我是新手堆叠溢出和javascript / jquery也..我自己学习。 原谅我，我正在努力将我的代码放到问题上，不能像其他人那样整洁和分离。

谢谢！！

Answer 1

在这里你无限。 可以用更少的代码完成。 http://jsfiddle.net/artuc/rGLsG/3/

HTML：

 Previous Next 
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
10
 
11
 
12
 
13
 
14
 
  

CSS：

 .carousel{ padding-top: 20px; width: 357px; overflow: hidden; height: 50px; position: relative; }.carousel ul{ position: relative; list-style: none; list-style-type: none; margin: 0; height: 50px; padding: 0; }.carousel ul li{ position: absolute; height: 25px; width: 50px; float: left; margin-right: 1px; background: #f2f2f2; text-align: center; padding-top: 25px; } 

JS：

 $(function(){ var carousel = $('.carousel ul'); var carouselChild = carousel.find('li'); var clickCount = 0; var canClick = true; itemWidth = carousel.find('li:first').width()+1; //Including margin //Set Carousel width so it won't wrap carousel.width(itemWidth*carouselChild.length); //Place the child elements to their original locations. refreshChildPosition(); //Set the event handlers for buttons. $('.btnNext').click(function(){ if(canClick){ canClick = false; clickCount++; //Animate the slider to left as item width carousel.stop(false, true).animate({ left : '-='+itemWidth },300, function(){ //Find the first item and append it as the last item. lastItem = carousel.find('li:first'); lastItem.remove().appendTo(carousel); lastItem.css('left', ((carouselChild.length-1)*(itemWidth))+(clickCount*itemWidth)); canClick = true; }); } }); $('.btnPrevious').click(function(){ if(canClick){ canClick = false; clickCount--; //Find the first item and append it as the last item. lastItem = carousel.find('li:last'); lastItem.remove().prependTo(carousel); lastItem.css('left', itemWidth*clickCount); //Animate the slider to right as item width carousel.finish(true).animate({ left: '+='+itemWidth },300, function(){ canClick = true; }); } }); function refreshChildPosition(){ carouselChild.each(function(){ $(this).css('left', itemWidth*carouselChild.index($(this))); }); } }); 

Answer 2

你去： http ： //jsfiddle.net/KPKyz/5/

JS

 var container = $("#carousel_wrapper"); var runner = container.find('ul'); var liWidth = runner.find('li:first').outerWidth(); var itemsPerPage = 3; var noofitems = runner.find('li').length; runner.width(noofitems * liWidth); container.width(itemsPerPage*liWidth); $('#right').click(function() { $( runner ).animate({ "left": "-=51px" }, "slow" ); }); $('#left').click(function() { $( runner ).animate({ "left": "+=51px" }, "slow" ); }); 

CSS

 div#carousel_wrapper{ overflow:hidden; position:relative; width:500px; height: 100px; } ul { padding:0px; margin:0px; position: absolute; top:50px; left: 0px; width:300px; height: 50px; overflow: hidden; } ul li { list-style:none; float:left; } ul li div { border:1px solid white; width:50px; height:50px; background-color:gray; }