このコードは、アニメーション コールバックが次または前の画像をクリックするのを待ちます。このプラグインのようにクリックする方法http://slidesjs.com/コールバックを待たないでください。どうもありがとうございました。
$(document).ready(function(){
var current = 0;
var next = 0;
var image_width = $("#slide>div>img").width();
var next_position = image_width * 2;
var clicked = false;
$("#slide").css('left','-'+image_width+'px');
$("#slide>div").css({'left':+image_width+'px','z-index':'0','display':'none'});
$("#slide>div").eq(0).css({'left':+image_width+'px','z-index':'5','display':'block'});
$("#thumbs>li").eq(0).attr('id', 'current');
$("#slide>div img").each(function(i){
$("#thumbs>li").eq(i).click(function(event){
event.preventDefault();
if(event.currentTarget.id != "current"){
if(!clicked){
clicked = true;
next = i;
$("#slide>div").eq(next).css({'left':+next_position+'px','z-index':'0','display':'block'});
$("#slide").animate({"left":"-="+image_width+"px"},3000,"easeInOutBack",function(){
$("#slide>div").eq(current).css({'left':+image_width+'px','z-index':'0','display':'none'});
$("#current").removeAttr("id");
$("#slide>div").eq(next).css({'left':+image_width+'px','z-index':'5','display':'block'});
$("#thumbs>li").eq(next).attr('id','current');
$("#slide").css('left','-500px');
clicked = false;
current = next;
});
}
}
});
});
});
私のHTMLコード
<div id="containner">
<div id="slide">
<div><img src="images/1.jpg" /></div>
<div><img src="images/2.jpg" /></div>
<div><img src="images/3.png" /></div>
<div><img src="images/4.jpg" /></div>
</div>
<ul id="thumbs">
<li><a href="#"><img src="images/1.jpg" /></a></li>
<li><a href="#"><img src="images/2.jpg" /></a></li>
<li><a href="#"><img src="images/3.png" /></a></li>
<li><a href="#"><img src="images/4.jpg" /></a></li>
</ul>
</div>