如何将旋转木马中心设为我点击中间的项目?我到处寻找答案,但他们不是直接的答案......有人可以帮助我吗?
这是我到目前为止所做的:http://jsfiddle.net/sp9Jv/
HTML:
<div id="wrapper">
<div id="carousel">
<a href="#" class="prev">prev</a>
<a href="#" class="next">next</a>
<div class="viewport">
<ul>
<li><a href="#">Un</a></li>
<li><a href="#">Deux</a></li>
<li><a href="#">Trois</a></li>
<li><a href="#">Quatre</a></li>
<li><a href="#">Cinq</a></li>
<li><a href="#">Six</a></li>
<li><a href="#">Sept</a></li>
<li><a href="#">Huit</a></li>
</ul>
</div>
<!-- viewport -->
</div>
<!-- carousel -->
</div>
<!-- wrapper -->
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;
}
答案 0 :(得分:3)
虽然您已准备好所有项目所需的所有信息,但您可以根据点击的项目计算左侧的值。
以下是我的修改:
我已经使用此功能绑定了旋转木马项目的点击操作,并使用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);
};
您可以查看此网址:http://jsfiddle.net/rUZHg/3/
我认为这应该可以工作,尽管在计算中心元素的左边0和左边之间的填充时,查看元素的数量。
答案 1 :(得分:1)
好吧,这很难看,我希望它会给你一些想法。
我创建了一个跟踪中心内容的全局currentItem
。每次轮播移动时都会更新。
我找到的非常有用的变量是selfPosLeft
,它告诉我被点击的内容。我应该补充一点,90
是我点击的倍数。必须链接到您的CSS,我不知道如何动态地找到这个数字。
请尝试:) http://jsfiddle.net/sp9Jv/4/
好吧,我想象的是,如果你有超过3个项目,你可以更改代码来计算当前项目和被点击的项目的selfPosLeft
之间的差异,我会留给你: )像这样,似乎工作。 http://jsfiddle.net/sp9Jv/5/