jsFiddle 在这里:http://jsfiddle.net/qBQD4/
真的很简单;我想要右箭头向前移动图像,左箭头在简单的幻灯片中向后移动它们。我在将要实现此代码的页面上运行多个幻灯片,因此我选择了 .next() 路由,而不是仅指定一个唯一的 div id。 HTML 是:
<div class="media">
<div class="slideButtons">
<span class="prev"><</span>
<span class="next">/ ></span>
</div>
<ul class="gallery" id="olympGallery">
<li><img src="http://i.imgur.com/8aA7W.jpg" alt="" title="" /></li>
<li><img src="http://i.imgur.com/jE7vj.jpg" alt="" title="" /></li>
<li><img src="http://i.imgur.com/L7lVg.jpg" alt="" /></li>
</ul>
</div>
jQuery 代码是:
var speed = 100;
$(".prev").click(function() {
var now = $(this).next("ul.gallery").children(":visible"),
last = $(this).next("ul.gallery").children(":last"),
prev = now.prev();
prev = prev.index() == -1 ? last : prev;
now.fadeOut(speed, function() {prev.fadeIn(speed);});
});
$(".next").click(function() {
var now = $(this).next("ul.gallery").children(':visible'),
first = $(this).next("ul.gallery").children(':first'),
next = now.next();
next = next.index() == -1 ? first : next;
now.fadeOut(speed, function() {next.fadeIn(speed);});
});
$(".gallery li").click(function() {
var first = $(this).parent().children(':first'),
next = $(this).next();
next = next.index() == -1 ? first : next;
$(this).fadeOut(speed, function() {next.fadeIn(speed);});
});
最后,一点 CSS:
.prev, .next {position: relative; padding: 3px; font-size:50px; font-weight: 900; cursor:pointer;
}
.gallery li{display:none; list-style:none;}
.gallery li:first-child {display:block;}
.gallery img {
max-height:550px
}
第三个功能工作正常(单击图像进入系列中的下一个)。但是,前两个完全坏了。我在这里做错了什么?
在上一个和下一个函数中,您忘记在尝试找到其关联的画廊之前提升到单击的 div 的父级,即:
var now = $(this).parent().next("ul.gallery").children(":visible")
工作示例在http://jsfiddle.net/alnitak/qBQD4/1/
FWIW,你真的应该把那个步骤分开成一个单独的变量,然后找到相关的图像:
var gallery = $(this).parent().next("ul.gallery");
var first = gallery.children(':first');
当您使用 .next(selector) 时,您正在寻找与选择器匹配的下一个兄弟姐妹。 换句话说,您正在寻找 DOM 树中同一级别的下一个元素。
这是更正后的 jsfiddle:http://jsfiddle.net/QALEE/
所有你需要的是使用 $(this).parent().next("ul.gallery") 来选择下一个“ul.gallery”元素。
在 20 分钟内写完。可能有一些非官方的代码行,但工作正常。 JS
$(document).ready(function () {
var currentBox=0;
$("#Right").click(function () {
var tobox = $(".mainbox").length;
if(currentBox<tobox-1){
if (currentBox == 0)
{
//if the first slide
$(".mainbox:nth(0)").hide();
$(".mainbox:nth(1)").show();
currentBox = currentBox + 1;
//alert("to right:" + tobox +currentBox) ;
}
else {
currentBox = currentBox + 1;
var h = currentBox - 1;
var s = currentBox;
$(".mainbox:nth(" + h + ")").hide();
$(".mainbox:nth(" + s + ")").show();
//alert("to right:" + tobox + currentBox);
}
} else {
$(".mainbox:nth(0)").show();
var a = tobox - 1;
$(".mainbox:nth(" + a + ")").hide();
currentBox = 0;
//alert("end");
}
});
$("#Left").click(function () {
var tobox = $(".mainbox").length;
if (currentBox == 0)
{//if the last slide
var a = tobox - 1;
$(".mainbox:nth(" + a + ")").show();
$(".mainbox:nth(0)").hide();
currentBox = a;
// alert("to left:" + tobox +currentBox) ;
}
else
{
// alert("Current box:"+ currentBox);
//
var h = currentBox;
var s = currentBox-1;
$(".mainbox:nth(" +h+ ")").hide();
$(".mainbox:nth(" + s + ")").show();
// alert("to right:" + tobox + currentBox);
currentBox = currentBox - 1;
}
//else { alert("end"); }
});
});
</script>
HTML
<div class="sliderOutbx">
<div class="Content">
<div class="NavLeft"><span id="Left">Left</span></div>
<div class="mainbox">
<div class="box">1</div>
<div class="box">2</div>
</div>
<div class="mainbox" style="display:none;">
<div class="box">3</div>
<div class="box">4</div>
</div>
<div class="mainbox" style="display:none;">
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="NavRight"><span id="Right">Right</span></div>
</div>
</div>
希望这可以帮助某人节省一天时间。