0

このコードは、アニメーション コールバックが次または前の画像をクリックするのを待ちます。このプラグインのようにクリックする方法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>
4

1 に答える 1

0

あなたが何を求めているのかよくわかりませんが、すでに存在するコードを書かないことを検討してください。スライドショーのような機能については、 jQuery Tools Scrollableで良い経験をしました。

于 2012-06-20T09:28:29.537 に答える