jQuery动画到div中的下一个图像 [英] jQuery animate to next image in div
问题描述
我在div
中有一些图像,当我单击与div中的下一个动画相关的下一个按钮时,我试图这样做.
I've got some images within a div
which i'm trying to when I click the next button animate to the next one in the div
在这个div中,我也有我的上一个和下一个按钮,显然我不想设置动画.
In this div I also have my previous and next button which I obviously don't want to animate to.
<div class="work">
<a href="#" class="rightButton"><img src="http://www.jamietaylor-webdesign.co.uk/images/home/right.png" /></a>
<a href="#" class="leftButton"><img src="http://www.jamietaylor-webdesign.co.uk/images/home/left.png" /></a>
<a href="#" class="1"><img class="topLeft" src="http://i.stack.imgur.com/JQFbb.jpg" /></a>
<a href="#" class="2"><img class="topRight" src="http://i.stack.imgur.com/l5OPs.jpg" /></a>
<a href="#" class="3"><img class="bottomLeft" src="http://i.stack.imgur.com/okxQz.jpg" /></a>
<a href="#" class="4"><img class="bottomRight" src="http://i.stack.imgur.com/4uPHw.jpg" /></a>
</div>
我的jQuery实际不起作用
My jQuery which doesn't actually work
// prevent click jump
$('a').click(function() {
return false;
});
// do work
$('.work > .leftButton').click(function() {
//animate to previous image in the list
$(this).siblings().prev().show();
});
$('.work > .rightButton').click(function() {
//animate to next image in the list
$(this).siblings().next().show();
});
是否可以为下一个没有leftButton
或rightButton
类的图像制作动画.
Is there a way to animate to the next image that doesn't have the class of leftButton
or rightButton
.
还有没有办法让我在第一个图像上转到div中的最后一个图像?
Also is there a way so that if i'm on the first image it will go to the last image in the div?
有什么想法吗?
推荐答案
已编辑以将图像滚动到视图中:
这需要对标记进行一些更改,但将允许图像向左/向右滚动:
This requires some change to your markup, but will allow images to scroll left/right:
HTML:
<div class="work">
<div class="nav">
<a href="#" class="rightButton"><img src="http://www.jamietaylor-webdesign.co.uk/images/home/right.png" /></a>
<a href="#" class="leftButton"><img src="http://www.jamietaylor-webdesign.co.uk/images/home/left.png" /></a>
</div>
<div class="scroller">
<div class="items">
<a href="#" class="1"><img class="topLeft" src="http://i.stack.imgur.com/JQFbb.jpg" /></a>
<a href="#" class="2"><img class="topRight" src="http://i.stack.imgur.com/l5OPs.jpg" /></a>
<a href="#" class="3"><img class="bottomLeft" src="http://i.stack.imgur.com/okxQz.jpg" /></a>
<a href="#" class="4"><img class="bottomRight" src="http://i.stack.imgur.com/4uPHw.jpg" /></a>
</div>
</div>
</div>
相关CSS:
div.work { background-color: #ddd; height:240px; position: relative; width:300px; margin-left:10px}
div.items { position:relative; width: 1000em; height: 240px; }
div.scroller { overflow: hidden; width: 300px; height: 100%; }
JavaScript:
$('.work .leftButton').click(function() {
var $items = $(".items");
if ($items.position().left === 0) {
$items.css("left", "-300px");
$items.children("a:last").prependTo($items);
}
$(".items").animate({
left: "+=300px"
});
});
$('.work .rightButton').click(function() {
var $items = $(".items");
if ($items.position().left === -900) {
$items.css("left", "-600px");
$items.children("a:first").appendTo($items);
}
$(".items").animate({
left: "-=300px"
});
});
基本上,这是一个固定的视口(scroller
),具有隐藏的溢出,其中包含包含所有图像的非常长的div
(items
). items
div仅在每次单击上一个/下一个按钮时才具有动画效果.
Basically what's going on is that there's a fixed viewport (scroller
) with hidden overflow that contains a really long div
(items
) containing all the images. The items
div is just animated on every click of the next/previous buttons.
棘手的部分是,当到达图像行的末尾时,将最后一个元素移到前面,反之亦然.这是由硬编码的值确定的,但可能可以通过精确的计算加以改善.
The tricky part is moving the last element to the front and vice/versa when the end of the line of images is reached. This is determined by hardcoded values, but could probably be improved using an exact calculation.
工作示例: http://jsfiddle.net/andrewwhitaker/6TLK2/3/
这篇关于jQuery动画到div中的下一个图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!