JavaScript幻灯片重叠问题

我试图从两个方面改进基于JS的幻灯片：

使用箭头键导航效果很好，但当我单击指向特定幻灯片的项目符号，然后使用箭头键时，幻灯片会重叠。我怎样才能解决这个问题

我想让幻灯片自动播放。我怎样才能做到这一点

（）

var main=function（）{
$（'.arrow next'）。单击（函数（）{
var currentSlide=$（'.active slide'）；
var nextSlide=currentSlide.next（）；
var currentDot=$（'.active dot'）；
var nextDot=currentDot.next（）；
if（nextSlide.length==0）{
nextSlide=$（'.slide'）.first（）；
nextDot=$（'.dot'）.first（）；
}
currentSlide.fadeOut（500）.removeClass（'active-slide'）；
nextSlide.fadeIn（500）.addClass（'active-slide'）；
currentDot.removeClass（'active-dot'）；
nextDot.addClass（'active-dot'）；
});
$（'.arrow prev'）。单击（函数（）{
var currentSlide=$（'.active slide'）；
var prevSlide=currentSlide.prev（）；
var currentDot=$（'.active dot'）；
var prevDot=currentDot.prev（）；
如果（prevSlide.length==0）{
prevSlide=$（'.slide'）.last（）；
prevDot=$（'.dot'）.last（）；
}
currentSlide.fadeOut（500）.removeClass（'active-slide'）；
prevsiled.fadeIn（500）.addClass（'active-slide'）；
currentDot.removeClass（'active-dot'）；
prevDot.addClass（'active-dot'）；
});
$（'.dot1'）。单击（函数（）{
$（'.slide'）.hide（）；
$（'#slide1'）.show（）；
});
$（'.dot2'）。单击（函数（）{
$（'.slide'）.hide（）；
$（'#slide2'）.show（）；
});
$（'.dot3'）。单击（函数（）{
$（'.slide'）.hide（）；
$（'#slide3'）.show（）；
});
$（'.dot4'）。单击（函数（）{
$（'.slide'）.hide（）；
$（'#slide4'）.show（）；
}); 
};
$（文件）.ready（主）
正文{
显示：块；
保证金：0；
}
标题{
背景色：天蓝色；
高度：125px；
}
收割台h1{
背景：url（'../images/vball.png'）不重复；
背景尺寸：100px 100px；
浮动：左；
高度：100px；
溢出：隐藏；
文本缩进：100%；
宽度：170px；
}
/*数字钟*/
.时间{
浮动：左；
字体大小：24px；
字体系列：草书；
高度：10px；
边缘顶部：10px；
文本对齐：居中；
宽度：150px；
}
#钟{
背景：紫色；
边界半径：10px；
边框：2件纯黑；
字体：24px粗体；
浮动：左；
高度：60px；
左边距：-150px；
边缘顶端：40px；
填充：14px；
宽度：150px；
}
.菜单ul{
浮动：对；
字体大小：20px；
列表样式：无；
利润率：55px 15px；
宽度：750px；
}
李先生{
显示：内联；
填充：15px 75px 10px；
}
/*主页的滑块*/
.滑块{
边框底部：1px纯黑；
高度：750px；
位置：相对位置；
宽度：100%；
}
.幻灯片{
背景：透明url（'../images/box gradient.png'）中心不重复；
背景尺寸：封面；
底部：0；
显示：无；
身高：150%；
位置：绝对位置；
排名：0；
宽度：100%；
}
.幻灯片{
显示：无；
身高：100%；
左：0；
位置：绝对位置；
排名：0；
宽度：100%；
}
.活动幻灯片{
显示：块；
}
.幻灯片副本h1{
字体大小：40px；
字体大小：200px；
边缘顶部：100px；
左边距：0px；
}
.幻灯片副本{
颜色：黑色；
字体系列：草书；
字体大小：22px；
边缘顶部：10px；
左边距：5px；
}
.幻灯片副本1 h1{
颜色：#33cccc；
字体大小：45px；
边缘顶部：100px；
左边距：10px；
}
.幻灯片副本-1页{
颜色：#33cccc；
字体大小：22px；
字体系列：草书；
边缘顶部：25px；
左边距：10px；
宽度：460px；
}
/*幻灯片1*/
.幻灯片背景{
背景：url（'../images/sunset.jpg'）中心不重复；
浮动：左；
高度：750px；
}
/*幻灯片2*/
.幻灯片图像{
显示：内联；
垫底：10px；
填充顶部：10px；
}
李先生{
浮动：对；
列表样式：无；
边缘底部：10px；
右边距：10px；
左边距：10px；
宽度：300px；
}
.imageList img{
高度：300px；
文本对齐：右对齐；
宽度：300px；
}
.上箭头{
显示：内联块；
左边距：20px；
边缘顶部：10px；
垂直对齐：顶部；
}
.下一个箭头{
显示：内联块；
右边距：20px；
边缘顶部：10px；
垂直对齐：顶部；
}
/*点滑块*/
.滑块导航{
文本对齐：居中；
}
.滑块点{
显示：内联块；
列表样式：无；
右边填充：40px；
}
.李点{
显示：内联；
颜色：#bbbcbc；
字体大小：30px；
左边距：3倍；
右边距：3倍；
填充：10px；
}
.滑块点li.活动点{
颜色：绿色；
}
李：悬停{
颜色：绿色；
光标：指针；
光标：手；
}

VBall










周围的
我们的生活是如此忙碌，每天的工作，生意和差事，我们往往从不停止，并采取在我们的周围。你最后一次停下来欣赏美丽的日落是什么时候

行动起来，充满动力！
在一个数字设备如此突出的世界里，我们迷失在其中。我们的优势在于我们的适应能力很强，但这也可能是我们最大的弱点

美食
我们以前都去过那里！！食物是最好的安慰。健康饮食固然好，但没有什么比你最喜欢的珍品更能满足你的灵魂了

视频
电影、电视节目和在线视频在我们的文化中扮演着巨大的角色。学习、娱乐、视觉满足感等


&bull
&bull
&bull
&bull

您不需要使用class
.dot
为每个元素声明多个事件。以下内容可以完成这项工作：

$('.dot').click(function(){
        var index = $(this).index(); // gets the index or position of the current element in all element that has class .dot
        $('.slide').fadeOut(500); // hides all elements with class .slide
        $('.dot').removeClass('active-dot'); // removes active-dot class from all .dot elements
        $('.slide').removeClass('active-slide').addClass('active'); // removes active-slide class and add active class to all elements with class slide
        $('#slide' + (index+1)).fadeIn(500); // use the index for the needed slide element lookup - index+1 is used since index starts from 0
        $('#slide' + (index+1)).removeClass('active').addClass('active-slide'); // remove class active from the extracted element and add class active-slide
        $(this).addClass('active-dot'); // add class active-dot to the current element which invokes the element.
    }); 

工作示例：
您不需要使用class
.dot
为每个元素声明多个事件。以下内容可以完成这项工作：

$('.dot').click(function(){
        var index = $(this).index(); // gets the index or position of the current element in all element that has class .dot
        $('.slide').fadeOut(500); // hides all elements with class .slide
        $('.dot').removeClass('active-dot'); // removes active-dot class from all .dot elements
        $('.slide').removeClass('active-slide').addClass('active'); // removes active-slide class and add active class to all elements with class slide
        $('#slide' + (index+1)).fadeIn(500); // use the index for the needed slide element lookup - index+1 is used since index starts from 0
        $('#slide' + (index+1)).removeClass('active').addClass('active-slide'); // remove class active from the extracted element and add class active-slide
        $(this).addClass('active-dot'); // add class active-dot to the current element which invokes the element.
    }); 

工作考试
$('.dot1').click(function(){
    $('.slide').hide();
    $('#slide1').show();
    changeCurrentSlide("#slide1");
    changeCurrentDot(".dot1");
}

function autoPlaySlide(){
    var currentSlide = $('.active-slide');
    var nextSlide = currentSlide.next();

    var currentDot = $('.active-dot');
    var nextDot = currentDot.next();

    if (nextSlide.length === 0) {
        nextSlide = $('.slide').first();
        nextDot = $('.dot').first();
    }

    currentSlide.fadeOut(500).removeClass('active-slide');
    nextSlide.fadeIn(500).addClass('active-slide');

    currentDot.removeClass('active-dot');
    nextDot.addClass('active-dot');

}
setInterval(autoPlaySlide, 5000 ); //Executes ever 5000ms