我一直在尝试创建jQuery图像滑块。到目前为止，单击前进/后退按钮时，我设法使图像滑块动画并滑动。现在，我正在尝试创建导航点。到目前为止，我已经成功尝试通过动画/单击前进/后退按钮滑动它们。但是当我尝试单击圆点以显示活动幻灯片时，它将无法正常工作。这是我的工作（我并没有将整个代码仅放在单击点时实现的功能上）
这是代码：http://codepen.io/anon/pen/PGmRkR
$(document).ready(function() {
sliderEvents();
});
var slides = $("#carousel .slides .slide")
var dots = $(".indicators .circle");
function sliderEvents() {
dots.click(function() {
var indeX = $(this).index();
var currentSlide = slides.eq(indeX);
currentSlide.addClass('active');
$(this).addClass('blip');
currentSlide.prev().removeClass('active');
$(this).prev().removeClass('blip');
});
}html,
body {
height: 100%;
position: relative;
}
* {
box-sizing: border-box;
}
#container {
width: 90%;
margin: 0 auto;
height: 100%;
}
header {
background: black;
height: 20px;
padding: 1.5em;
color: white;
}
#carousel {
position: relative;
margin: 0 auto;
width: 45%;
margin-top: 15px;
height: 100%;
}
.slide {
position: absolute;
max-width: 100%;
z-index: 0;
}
.sliderbuttons {} #prev,
#next {
position: absolute;
background-color: rgba(255, 148, 41, 0.68);
box-shadow: 2px white;
border: none;
font-size: 2em;
color: white;
font-weight: bold;
/* font-family: 'Baloo Tamma', cursive;
*/
padding: 10px;
top: 15%;
width: 10%;
/*making the prev,next on top of content*/
z-index: 2;
}
#prev {
left: 0;
}
#next {
right: 0;
}
.active {
z-index: 1;
}
.indicators {
z-index: 2;
position: absolute;
bottom: 49%;
left: 45%;
}
.circle {
border-radius: 10px;
width: 10px;
height: 5px;
border: 2px solid black;
}
.indicators div {
padding: 8px;
margin: 2px;
display: inline-block;
}
.blip {
background-color: orange;
}
div.indicators:hover {
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Image carousel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="carouselcss.css">
<!-- <link href="https://fonts.googleapis.com/css?family=Baloo+Tamma" rel="stylesheet"> -->
</head>
<body>
<div id="container">
<header>
header is here
</header>
<div id="carousel">
<div class="sliderbuttons">
<input type="button" name="next" id="next" value=">">
<input type="button" name="next" id="prev" value="<">
</div>
<div class="slides">
<img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="image1" class="slide active">
<img src="http://www.mrwallpaper.com/wallpapers/green-Rice-1600x900.jpg" alt="image2" class="slide">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg" alt="image3" class="slide">
</div>
<div class="indicators">
<div class="circle blip"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-1.12.1.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="carousel.js"></script>
</body>
</html>最佳答案
您必须从每个元素中删除blip和active类，因此它们不会相互叠加。
您可以在这里：http://codepen.io/denea/pen/wzdmoY
$(document).ready(function(){
sliderEvents();
//startSlider();
});
var slides = $("#carousel .slides .slide");
var dots=$(".indicators .circle");
function sliderEvents() {
dots.click(function () {
var indeX=$(this).index();
//console.log(indeX);
var currentSlide=slides.eq(indeX);
currentSlide.addClass('active');
$(this).addClass('blip');
$(".slides img").not(currentSlide).removeClass('active');
$(".circle").not(this).removeClass('blip');
//console.log(currentSlide.prev().index());
});
}
关于javascript - jQuery的图像滑块导航点不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39713852/