JavaScript 幻灯片重叠问题

Question

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

1. 使用箭头键导航效果很好，但是当我单击指向特定幻灯片的项目符号点然后使用箭头键时，幻灯片会重叠。我该如何解决这个问题？
2. 我希望幻灯片自动播放。我怎样才能完成这项工作？

( Example on jsFiddle .)

var main = function(){

	
	$('.arrow-next').click(function(){
		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').click(function(){
		var currentSlide = $('.active-slide');
		var prevSlide = currentSlide.prev();

		var currentDot = $('.active-dot');
		var prevDot = currentDot.prev();

		if(prevSlide.length === 0) {
     	 	prevSlide = $('.slide').last();
     		prevDot = $('.dot').last();
     	}
     	currentSlide.fadeOut(500).removeClass('active-slide');
     	prevSlide.fadeIn(500).addClass('active-slide');

     	currentDot.removeClass('active-dot');
     	prevDot.addClass('active-dot');
	});

	


	$('.dot1').click(function(){
		$('.slide').hide();
		$('#slide1').show();
	});
	$('.dot2').click(function(){
		$('.slide').hide();
		$('#slide2').show();
	});
	$('.dot3').click(function(){
		$('.slide').hide();
		$('#slide3').show();
	});
	$('.dot4').click(function(){
		$('.slide').hide();
		$('#slide4').show();
	}); 
};

$(document).ready(main);

body {
	display: block;
	margin:0;
}


header {
	background-color: skyblue;
	height: 125px;
}

header h1 {
background: url('../images/vball.png') no-repeat; 
background-size: 100px 100px;
float: left;
height: 100px;
overflow: hidden;
text-indent: 100%;
width: 170px;
}

/*digital clock*/
.time {
	float: left;
	font-size: 24px;
	font-family: cursive;
	height: 10px;
	margin-top: 10px;
	text-align: center;
	width: 150px;
}


#clock {
	background: purple;
	border-radius: 10px;
	border: 2px solid black;
	font: 24px bold;
	float: left;
	height: 60px;
	margin-left: -150px;
	margin-top: 40px;
	padding: 14px;
	width: 150px;
}

.menu ul {
	float:right;
	font-size: 20px;
	list-style: none;
	margin: 55px 15px;
	width: 750px;
}

.menu li {
	display: inline;
	padding: 15px 75px 10px;
}


/* slider for the home page*/
.slider {
	border-bottom: 1px solid black;
	height: 750px;
	position: relative;
	width: 100%;
}

.slide {
	background: transparent  url('../images/box-gradient.png') center	center	no-repeat;
	background-size: cover;
	bottom: 0;
	display: none;
	height: 150%;
	position: absolute;
	top: 0;
	width: 100%;
}

.slide {
	display: none;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.active-slide {
	display: block;
}

.slide-copy h1 {
	font-size: 40px;
	font-weight: 200px;
	margin-top: 100px;
	margin-left: 0px;
}

.slide-copy p {
	color: black;
	font-family: cursive;
	font-size: 22px;
	margin-top: 10px;
	margin-left: 5px;
}

.slide-copy-1 h1{
	color: #33cccc;
	font-size: 45px;
	margin-top: 100px;
	margin-left: 10px;
}

.slide-copy-1 p {
	color: #33cccc;
	font-size: 22px;
	font-family: cursive;
	margin-top: 25px;
	margin-left: 10px;
	width: 460px;
}

/* slide 1*/
.slide-bg {
 background: url('../images/sunset.jpg') center no-repeat;
 float: left;
 height: 750px;
}

/* slide 2*/
.slide-image {
	display: inline;
	padding-bottom: 10px;
	padding-top: 10px;
}

.imageList li{
	float: right;
	list-style: none;
	margin-bottom: 10px;
	margin-right: 10px;
	margin-left: 10px;
	width: 300px;
}

.imageList img {
	height: 300px;
	text-align: right;
	width: 300px;
}

.arrow-prev {
	display: inline-block;
	margin-left: 20px;
	margin-top: 10px;
	vertical-align: top;
}

.arrow-next {
	display: inline-block;
	margin-right: 20px;
	margin-top: 10px;
	vertical-align: top;
}

/*dot sliders*/
.slider-nav {
	text-align: center;
}

.slider-dot {
	display: inline-block;
	list-style: none;
	padding-right: 40px;
}

.slider-dot li {
	display: inline;
	color: #bbbcbc;
	font-size: 30px;
	margin-left: 3px;
	margin-right: 3px;
	padding: 10px;
}

.slider-dot li.active-dot {
	color:green;
}


li:hover {	
	color:green;
	cursor: pointer;
	cursor: hand;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
		<div class='container'>
			<h1 class='vb'>VBall</h1>
			<div class='time'></div>
			<div id='clock'></div>
			<nav class='menu'>
				<ul>
					<li>
						<a href="#">Home</a>
					</li>
					<li>
						<a href="#">Bio</a>
					</li>
					<li>
						<a href="#">Hobbies</a>
					</li>
					<li>
						<a href="#">Link</a>
					</li>
				</ul>
			</nav>
		</div>
	</header>
<div class='slider'>
	<div class='slide active-slide slide-bg' id='slide1'>
		<div class='container'>
			<div class='row'>
					<div class='slide-copy-1 col-xs-12'>
						<h1>Surrounding</h1>
						<p>Our lives are so hectic with everyday work, business and errands that we tend to never stop and take in our surrounding.  When was the last time you stop and enjoy a nice beatiful sunset?</p>
					</div>
			</div>
		</div>
	</div>
	<div class='slide' id='slide2'>
		<div class='container'>
			<div class='row'>
				<div class='slide-copy col-xs-5'>
				<h1>Get Moving And Motivated!</h1>
				<p>In a world where digital devices is so prominent, we get lost in them.  Our strength are that we are very adaptable but it can also be our greatest weakness. </p>
				</div>
					 <div class='slide-image'>
					<!--	<ul class='imageList'>
							<li><a href='#'><img src="images/jog.jpg" /></a></li>
							<li><a href='#'><img src="images/health.png" /></a></li>
							<li><a href='#'><img src="images/motivated.jpg" /></a></li>
							<li><a href='#'><img src='images/possible.jpg' /></a></li>
						</ul> -->
					</div>
			</div>
		</div>
	</div>
	<div class='slide' id='slide3'>
		<div class='container'>
			<div class='row'>
				<div class='slide-copy col-xs-5'>
				<h1>Food Delight</h1>
				<p>We have all been there before!! Food is the best type of comfort.  Eating healthy is great but nothing can satisfied your soul more than your favorite rarities.</p>
				<img src="images/sushi.jpg" />
				<form>
					<textarea class="status-box" placeholder='What is your favorite food?'></textarea>
				</form>
				</div>
			</div>
		</div>
	</div>
	<div class='slide' id='slide4'>
		<div class='container'>
			<div class='row'>
				<div class='slide-copy col-xs-5'>
				<h1>Videos</h1>
				<p>Movies, TV shows and online video are play such a huge role in our culture.  Learning, Entertainment, Visual Satisfaction etc</p>
				<iframe src=""></iframe>
				</div>
			</div>
		</div>
	</div>
</div>
	<div class='slider-nav'>
		<a href='#' class='arrow-prev'><img src="images/arrow-prev.png"></a>
			<ul class='slider-dot'>
				<li class='dot dot1 active-dot'>&bull;</li>
				<li class='dot dot2'>&bull;</li>
				<li class='dot dot3'>&bull;</li>
				<li class='dot dot4'>&bull;</li>
			</ul>
		<a href="#" class='arrow-next'><img src="images/arrow-next.png"></a>
	</div>

Answer 1

您不需要为具有类 .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.
    }); 

工作示例:https://jsfiddle.net/gz7xebgz/6/