JavaScript开关中的幻灯片动画不一致

JavaScript开关中的幻灯片动画不一致,javascript,jquery,animation,slider,carousel,Javascript,Jquery,Animation,Slider,Carousel,我试图在JavaScript开关语句中实现一个左/右滑动动画,并且该动画(左/右滑动时没有反弹效果,图像之间没有空格)没有持续激活。此外,在第一张幻灯片上单击“上一张”按钮和在最后一张幻灯片上单击“下一张”按钮时,幻灯片动画仍会激活。这不应该发生。有人有什么想法吗?请参见代码示例 $(函数(){ //用户可编辑控件 var content='img';//接受任何DOM元素-div、img、table等。。。 var showControls=true;//true/false显示/隐藏滑块的

我试图在JavaScript开关语句中实现一个左/右滑动动画,并且该动画(左/右滑动时没有反弹效果,图像之间没有空格)没有持续激活。此外,在第一张幻灯片上单击“上一张”按钮和在最后一张幻灯片上单击“下一张”按钮时,幻灯片动画仍会激活。这不应该发生。有人有什么想法吗?请参见代码示例

$(函数(){
//用户可编辑控件
var content='img';//接受任何DOM元素-div、img、table等。。。
var showControls=true;//true/false显示/隐藏滑块的导航控件
var transition='slide';//支持默认、淡入淡出、滑动
var transitionDuration=.5;//调整以秒为单位的转换时间
//变量声明
var contentType=$(内容);
var$el=$(“#showcase”);
var$leftArrow='#leftArrow';
var$rightArrow='#rightArrow';
var$load=$el.find(contentType)[0];
var slideCount=$el.children().length;
var slideNum=1;
//使用正确的设置预加载幻灯片
$load.className='active';
//将滑块控件添加到页面
如果(showControls===true){
$('').insertAfter('#showcase');
$(“#控件”).find(“#左箭头”).addClass('disabled');
}
//幻灯片转换逻辑
函数转换(){
开关(转换){
//渐变过渡
“褪色”一案:
$('.slide').stop().animate({opacity:0},transitionDuration*300,function()){
$('.active').stop().animate({opacity:1},transitionDuration*1000);
});
打破
//滑动过渡
案例“幻灯片”:
如果(slideNum>1){
$('.slide').stop().animate({left:-160},transitionDuration*800,function()){
$('.active').stop().animate({left:0},transitionDuration*1000);
});
}
if(slideNum1){
变量计数器=$('.active').index();
计数器--;
$('.active').addClass('slide');
$('.active').removeClass('active');
过渡();
$el.find(contentType).eq(counter).addClass('active');
滑动枚举--;
检查幻灯片();
}
})
$(文档)。在('click',$rightArrow,function()上{
if(slideNum
#展示{
宽度:160px;
溢出:隐藏;
}
img{
宽度:160px;
}
a{
颜色:蓝色;
}
.残疾人{
颜色:红色!重要;
}
.幻灯片{
显示:无;
不透明度:0;
位置:相对位置;
左:0px;
右:0px;
}
.主动{
显示:块;
不透明度:1;
位置:相对位置;
左:0px;
右:0px;
}

如评论中所述,您需要修复您的条件语句。不久前,您设置了两个
单击
处理程序-其中一个处理程序在另一个处理程序被触发时被绑定(并且在任何情况下被触发),这导致在第一张幻灯片上单击上一个按钮和在最后一张幻灯片上单击下一个按钮时,幻灯片动画仍然激活。

至于动画,请参见下面的代码。我稍微改变了你的状况。单击“上一步”时,幻灯片将从左向右移动。单击“下一步”时,幻灯片将从右向左移动。我使用了一个标志来确定它将进行的移动-请参见转换函数的新参数

$(函数(){
//用户可编辑控件
var content='img';//接受任何DOM元素-div、img、table等。。。
var showControls=true;//true/false显示/隐藏滑块的导航控件
var transition='slide';//支持默认、淡入淡出、滑动
var transitionDuration=.5;//调整以秒为单位的转换时间
//变量声明
var contentType=$(内容);
var$el=$(“#showcase”);
var$leftArrow='#leftArrow';
var$rightArrow='#rightArrow';
var$load=$el.find(contentType)[0];
var slideCount=$el.children().length;
var slideNum=1;
//使用正确的设置预加载幻灯片
$load.className='active';
//将滑块控件添加到页面
如果(showControls===true){
$('').insertAfter('#showcase');
$(“#控件”).find(“#左箭头”).addClass('disabled');
}
//幻灯片转换逻辑
函数转换(impl=null){
开关(转换){
//渐变过渡
“褪色”一案:
$('.slide').stop().animate({
不透明度:0
},转换持续时间*300,函数(){
$('.active').stop().animate({
不透明度:1
},过渡期*1000);
});
打破
//滑动过渡
案例“幻灯片”:
如果(impl==“下一步”){
$('.slide').css(“左”,“160px”);
$('.slide').stop().animate({
左:160
},转换持续时间*800,函数(){
$('.active').stop().animate({
左:0
},过渡期*1000);
});
}否则如果(impl==“prev”){
$('.slide').css(“左“,'-160px”);
$('.slide').stop().animate({