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 回答