我的滑块点击事件动画问题？

Posted 2023-05-08

【中文标题】我的滑块点击事件动画问题？

【英文标题】：My Slider click event to animate ploblem?

【发布时间】：2012-06-21 22:02:21

【问题描述】：

此代码等待动画回调单击下一张或上一张图像。如何点击这个插件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>

【问题讨论】：

你能举个例子吗？

好的，我已经编辑了我的代码

【参考方案1】：

我不太确定您在问什么，但请考虑不要编写已经存在的代码。对于类似幻灯片的功能，我对jQuery Tools Scrollable 有很好的体验。