我在div
内有一些图片,当我点击下一个按钮动画到div中的下一个按钮时,我正试图这样做
在这个div中我还有我的上一个和下一个按钮,我显然不想动画。
<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实际上不起作用
// 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
类的图片制作动画。
还有一种方法,如果我在第一张图片上,它会转到div中的最后一张图片吗?
Here's a link to the jsFiddle i've got
有什么想法吗?
答案 0 :(得分:7)
已修改为将图片滚动到视图中
这需要对标记进行一些更改,但允许图像向左/向右滚动:
<强> 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都会生成动画。
当到达图像行的末尾时,棘手的部分是将最后一个元素移动到前面,反之亦然。这由硬编码值决定,但可以使用精确计算来改进。
答案 1 :(得分:2)
如果你从CSS中移除'display:none'(在img标签上),这里的代码适用于你的标记并在左右按钮上旋转图像:
<script type="text/javascript">
<!--
$(function() {
$("div.work >a:gt(2)").hide();
$(".rightButton").click(function () {
if ($("div.work >a:last").is(":visible"))
{
$("div.work >a:gt(1)").hide();
$("div.work >a:eq(2)").show();
} else {
$("div.work >a:visible:gt(1)").hide().next().show();
}
});
$(".leftButton").click(function () {
if ($("div.work >a:eq(2)").is(":visible"))
{
$("div.work >a:gt(1)").hide();
$("div.work >a:last").show();
} else {
$("div.work >a:visible:gt(1)").hide().prev().show();
}
});
});
//-->
</script>