如何在点击jquery时将轮播项目移动到中间
如何将旋转木马中心设为我点击中间的项目？ 我到处寻找答案，但他们不是直接答案……有人可以帮助我吗？
这就是我到目前为止所做的： http ： //jsfiddle.net/sp9Jv/
HTML：
JavaScript的：
var carousel = $('#carousel'), prev = carousel.find('.prev'), next = carousel.find('.next'), viewport = carousel.find('.viewport'), item = viewport.find('li'), itemWidth = item.outerWidth(true), itemNum = item.length, itemList = viewport.find('ul'); itemList.width(itemWidth * itemNum); var moveCarousel = function(dir) { itemList.animate({ left: '-=' + (itemWidth * dir) + 'px' }, 400); }; //prev prev.on('click', function(e) { e.preventDefault(); moveCarousel(-1); }); //next next.on('click', function(e) { e.preventDefault(); moveCarousel(1); }); //carousel item item.on('click', 'a', function(e) { var self = $(this), selfIndex = self.index(), distance = itemList.width() / 2, selfPos = self.position(), selfPosLeft = selfPos.left, viewportPosLeft = viewport.position().left; e.preventDefault(); //move item to middle, but it doesn't work... if (selfPosLeft > Math.floor(viewport.width())/3) { itemList.animate({ left: '-' + Math.floor(viewport.width())/3 + 'px' }, 400); } if (selfPosLeft < Math.floor(viewport.width())/3) { itemList.animate({ left: Math.floor(viewport.width())/3 + 'px' }, 400); } });
CSS：
#wrapper { width: 500px; margin: 20px auto; } #carousel { position: relative; } .viewport { width: 260px; border: 1px solid #6e6e6e; height: 80px; overflow: hidden; position: relative; margin-left: 100px; } .prev, .next { position: absolute; } .prev { top: 20px; left: 0; } .next { top: 20px; right: 0; } .viewport ul { position: absolute; } .viewport li { float: left; margin-right: 10px; } .viewport li a { display: block; width: 80px; height: 80px; background: #ddd; }
在准备好所有项目所需的所有信息后，您可以根据单击的项目计算左侧的值。
这是我的修改：
并且我使用此函数绑定了轮播项目的单击操作，并使用self关键字传递了单击的项目。
var itemClicked=function(item){ var itemIndex=$(item).index(), newLeft=(itemIndex*itemWidth*-1)+Math.floor(($(viewport).width()/itemWidth)/2)*itemWidth; $(itemList).animate({left:newLeft+"px"},400); };
你可以检查一下这个url： http ： //jsfiddle.net/rUZHg/3/
我假设这应该可以工作，尽管它在计算中心元素的左边0和左边之间的填充时查看了元素的数量。
好吧，它很难看，我希望它会给你一些想法。
我创建了一个全局currentItem来跟踪中心的内容。 每次旋转木马移动时都会更新。
我找到的非常有用的变量是selfPosLeft ，它告诉我被点击的内容。 我应该补充说， 90是我从点击中获得的倍数。 必须链接到您的CSS，我不知道如何动态地找到这个数字。
请试试:) http://jsfiddle.net/sp9Jv/4/
好吧，我想象的是，当你有超过3个项目时，你可以更改代码来计算当前项目和被点击的项目的selfPosLeft之间的差异，我会留给你:)这样，似乎工作。 http://jsfiddle.net/sp9Jv/5/