Jquery 下一步按钮不适用于图片库
Jquery next button not working with image gallery
在我点击下一张按钮后,大图只会变成下一张图片'twice'。上一个按钮可以正常工作,但每当我重新加载页面时,下一个按钮就不能正常工作。
如果你能看看是什么问题,那就太好了,因为我已经尝试了很长时间来修复它,但没能成功。提前谢谢你。
<div >
<table id = "frame-table">
<tr>
<td id = "left1">
<img src="http://www.vintagevictorian.com/kuba_arrow_button_left.png" alt = "left"/>
</td>
<td id = "right1">
<img src="http://4vector.com/i/free-vector-kuba-arrow-button-set-clip-art_117492_Kuba_Arrow_Button_Set_clip_art_hight.png" alt = "right"/>
</td>
</tr>
</table>
<img class="img" src="http://www.gravatar.com/avatar/3d561d41394ff0d5d0715b2695c3dcf0?s=128&d=identicon&r=PG" alt="Chania" width="204" height="236">
</div>
<div id = "wrapper">
<ul id = "portfolio">
<li><img class="img-thumbnail" src="http://www.gravatar.com/avatar/3d561d41394ff0d5d0715b2695c3dcf0?s=128&d=identicon&r=PG" alt = "img"/></li>
<li><img class="img-thumbnail" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png" alt = "img"/></li>
<li><img class="img-thumbnail" src="https://lh3.googleusercontent.com/-JE-Vccj5xwk/AAAAAAAAAAI/AAAAAAAAABg/aFghGr0aeYw/photo.jpg" alt = "img"/></li>
</ul>
<button id="zoom" type="button" class="btn btn-info">
<span class="glyphicon glyphicon-search"> Zoom </span>
</button>
</div>
$(function(){
var current_li =$("#portfolio li").first().parent();
$("#right1").click(function(){
if (current_li.is(":last-child")){
var next_li = $("#portfolio li").first();
} else{
var next_li = current_li.next();
}
var next_src = next_li.children("img").attr("src");
alert(next_src);
$(".img").attr("src", next_src);
current_li = next_li;
});
$("#left1").click(function(){
if (current_li.is(":first-child")){
var prev_li = $("#portfolio li").last();
} else{
var prev_li = current_li.prev();
}
var prev_src = prev_li.children("img").attr("src");
$(".img").attr("src", prev_src);
current_li = prev_li;
});
});
var current_li =$("#portfolio li").first().parent();
应该是
var current_li =$("#portfolio>li").first();
已在本地测试并正在运行。
在我点击下一张按钮后,大图只会变成下一张图片'twice'。上一个按钮可以正常工作,但每当我重新加载页面时,下一个按钮就不能正常工作。
如果你能看看是什么问题,那就太好了,因为我已经尝试了很长时间来修复它,但没能成功。提前谢谢你。
<div >
<table id = "frame-table">
<tr>
<td id = "left1">
<img src="http://www.vintagevictorian.com/kuba_arrow_button_left.png" alt = "left"/>
</td>
<td id = "right1">
<img src="http://4vector.com/i/free-vector-kuba-arrow-button-set-clip-art_117492_Kuba_Arrow_Button_Set_clip_art_hight.png" alt = "right"/>
</td>
</tr>
</table>
<img class="img" src="http://www.gravatar.com/avatar/3d561d41394ff0d5d0715b2695c3dcf0?s=128&d=identicon&r=PG" alt="Chania" width="204" height="236">
</div>
<div id = "wrapper">
<ul id = "portfolio">
<li><img class="img-thumbnail" src="http://www.gravatar.com/avatar/3d561d41394ff0d5d0715b2695c3dcf0?s=128&d=identicon&r=PG" alt = "img"/></li>
<li><img class="img-thumbnail" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png" alt = "img"/></li>
<li><img class="img-thumbnail" src="https://lh3.googleusercontent.com/-JE-Vccj5xwk/AAAAAAAAAAI/AAAAAAAAABg/aFghGr0aeYw/photo.jpg" alt = "img"/></li>
</ul>
<button id="zoom" type="button" class="btn btn-info">
<span class="glyphicon glyphicon-search"> Zoom </span>
</button>
</div>
$(function(){
var current_li =$("#portfolio li").first().parent();
$("#right1").click(function(){
if (current_li.is(":last-child")){
var next_li = $("#portfolio li").first();
} else{
var next_li = current_li.next();
}
var next_src = next_li.children("img").attr("src");
alert(next_src);
$(".img").attr("src", next_src);
current_li = next_li;
});
$("#left1").click(function(){
if (current_li.is(":first-child")){
var prev_li = $("#portfolio li").last();
} else{
var prev_li = current_li.prev();
}
var prev_src = prev_li.children("img").attr("src");
$(".img").attr("src", prev_src);
current_li = prev_li;
});
});
var current_li =$("#portfolio li").first().parent();
应该是
var current_li =$("#portfolio>li").first();
已在本地测试并正在运行。