我正在尝试在两个方面改进基于JS的幻灯片：
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'>•</li>
<li class='dot dot2'>•</li>
<li class='dot dot3'>•</li>
<li class='dot dot4'>•</li>
</ul>
<a href="#" class='arrow-next'><img src="images/arrow-next.png"></a>
</div>
答案 0 :(得分：3)
您不需要为类.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.
});
答案 1 :(得分：2)
因此，当您调用点click时，它们重叠的原因是隐藏并显示新点。它不会更改活动幻灯片或活动点。
function changeCurrentSlide(slideNumberText){
var currentSlide = $('.active-slide');
var newSlide = $(slideNumberText);
currentSlide.fadeOut(500).removeClass('active-slide');
newSlide.fadeIn(500).addClass('active-slide');
}
function changeCurrentDot(dotNumberText){
var currentDot = $('.active-dot');
var newDot = $(dotNumberText);
currentDot.removeClass('active-dot');
newDot.addClass('active-dot');
}
所以要打电话给你，你想做这样的事情。
$('.dot1').click(function(){
$('.slide').hide();
$('#slide1').show();
changeCurrentSlide("#slide1");
changeCurrentDot(".dot1");
}
<强> 实施例
https://jsfiddle.net/gz7xebgz/10/
自动播放幻灯片
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