我从头开始构建这个滑块/推子/旋转木马并且点的可点击性很好，但是，当您选择特定图像时，由于滑块的功能仍然存在，每个图像的标题都会渗透实施和运行。当用户在特定时间段内单击特定点时，是否有办法停止或暂停该功能，然后再次开始运行？还有另一种隐藏不活动字幕的方法吗？我尝试过几种不同的方法，但没有一种方法可以正常工作。这是代码：
function cycleImages() {
var $active = $('.image.active');
var $next = $active.next().length > 0 ? $active.next() : $('.image:first');
$active.animate({
opacity:'0'
},400,function(){
$active.removeClass('active')
$next.animate({
opacity:'1'
},400,function(){
$next.addClass('active');
})
});
}
$(document).ready(function(){
setInterval('cycleImages()', 7000);
$(".fader, .dots.one").on("click", function(){
if($(this).hasClass("one")) {
$(".dots.one").toggleClass('dot-active');
$(".dots.two, .three, .four, .five").removeClass('dot-active');
$(".image, .img-1").siblings(".img-2, .img-3, .img-4, .img-5").css("opacity", "0");
$(".img-1, .caption").css("opacity", "1");
}
});
$(".fader, .dots.two").on("click", function(){
if($(this).hasClass("two")) {
$(".dots.two").toggleClass('dot-active');
$(".dots.one, .three, .four, .five").removeClass('dot-active');
$(".image, .img-2").siblings(".img-1, .img-3, .img-4, .img-5").css("opacity", "0");
$(".img-2, .caption").css("opacity", "1");
}
});
$(".fader, .dots.three").on("click", function(){
if($(this).hasClass("three")) {
$(".dots.three").toggleClass('dot-active');
$(".dots.one, .two, .four, .five").removeClass('dot-active');
$(".image, .img-3").siblings(".img-1, .img-2, .img-4, .img-5").css("opacity", "0");
$(".img-3, .cp-3").css("opacity", "1");
}
});
$(".fader, .dots.four").on("click", function(){
if($(this).hasClass("four")) {
$(".dots.four").toggleClass('dot-active');
$(".dots.one, .two, .three, .five").removeClass('dot-active');
$(".image, .img-4").siblings(".img-1, .img-2, .img-3, .img-5").css("opacity", "0");
$(".img-4, .cp-4").css("opacity", "1");
}
});
$(".fader, .dots.five").on("click", function(){
if($(this).hasClass("five")) {
$(".dots.five").toggleClass('dot-active');
$(".dots.one, .two, .three, .four").removeClass('dot-active');
$(".image, .img-5").siblings(".img-1, .img-2, .img-3, .img-4").css("opacity", "0");
$(".img-5, .cp-5").css("opacity", "1");
}
});
}); div.image div.caption {
display: visible;
position: absolute;
overflow: hidden;
z-index: 20;
color: white;
background-color: rgba(0,0,0,0.3);
height: 10%;
width: 99.5%;
bottom: 0;
font-family: arial;
font-size: 10pt;
padding: 0.5em;
}
.fader {
height: 40vw;
}
.fader div.image img {
margin-left: -4.25em;
}
.fader {
border-radius: 1em;
height: 25vw;
width: 74vw;
max-height: 100%;
min-height: 10vw;
margin: 0 auto;
border-left: 1.5em solid #aa917d;
border-right: 1.5em solid #aa917d;
position: relative;
overflow: hidden;
}
.fader div.image img {
display: block;
width: 100%;
margin: 0 auto;
z-index: 1;
position: absolute;
}
div.image img {
z-index: 5;
}
div.image{
opacity:0;
transition:all 1s ease-in;
}
div.image.active{
opacity:1;
}
.dots {
float: right;
background-color: rgba(255,255,255,100);
border: none;
border-radius: .85vw;
display: inline-block;
height: .85vw;
width: .85vw;
margin: .2em .2em .2em .2em;
}
.dots.active {
background-color: #aa917d;
}
.dot-container button {
padding: 0px;
}
.dot-container {
float: right;
margin-right: .5em
}
.dot-active {
background-color: #766557;
}
button {
font-family: arial;
color: white;
cursor: pointer;
border: none;
background: none;
padding-left: 0px;
}
button:focus {
outline: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fader">
<div class="image img-1 active">
<img class="" src="http://media.istockphoto.com/vectors/watercolor-blue-banner-vector-id520176256?s=2048x2048" alt="" style="height: 100%; width:auto; object-fit: fill">
<div class="caption">
<span class="image-info cp-1 active"><a>Harvard Law School - Cambridge, MA</a></span>
<div class="dot-container">
<button><span class="dots five"></span></button>
<button><span class="dots four"></span></button>
<button><span class="dots three"></span></button>
<button><span class="dots two"></span></button>
<button><span class="dots one active"></span></button>
</div>
</div>
</div>
<div class="image img-2">
<img class="" src="http://media.istockphoto.com/illustrations/turquoise-and-chartreuse-mottled-background-with-dotted-pattern-illustration-id505491352?s=2048x2048" alt="" style="height: 100%; width:auto; object-fit: fill">
<div class="caption">
<span class="image-info cp-2"><a>Battery Wharf - Boston, MA</a></span>
<div class="dot-container">
<button><span class="dots five"></span></button>
<button><span class="dots four"></span></button>
<button><span class="dots three"></span></button>
<button><span class="dots two active"></span></button>
<button><span class="dots one"></span></button>
</div>
</div>
</div>
<div class="image img-3">
<img class="" src="http://media.istockphoto.com/illustrations/blank-abstract-light-blue-watercolor-background-illustration-id499570852?s=2048x2048" alt="" style="height: 100%; width:auto; object-fit: fill">
<div class="caption">
<span class="image-info cp-3"><a>Back Bay Hotel - Boston, MA</a></span>
<div class="dot-container">
<button><span class="dots five"></span></button>
<button><span class="dots four"></span></button>
<button><span class="dots three active"></span></button>
<button><span class="dots two"></span></button>
<button><span class="dots one"></span></button>
</div>
</div>
</div>
<div class="image img-4">
<img lass="" src="http://media.istockphoto.com/illustrations/gold-glitter-painted-background-illustration-id512988164?s=2048x2048" alt="" style="height: 100%; width:auto; object-fit: fill">
<div class="caption">
<span class="image-info cp-4"><a>Ashmont MBTA Station - Dorchester, MA</a></span>
<div class="dot-container">
<button><span class="dots five"></span></button>
<button><span class="dots four active"></span></button>
<button><span class="dots three"></span></button>
<button><span class="dots two"></span></button>
<button><span class="dots one"></span></button>
</div>
</div>
</div>
<div class="image img-5">
<img class="" src="http://media.istockphoto.com/illustrations/pink-orange-backgrounds-watercolor-painting-abstract-illustration-id514635080?s=2048x2048" alt="" style="height: 100%; width:auto; object-fit: fill">
<div class="caption">
<span class="image-info cp-5"><a>----------</a></span>
<div class="dot-container">
<button><span class="dots five active"></span></button>
<button><span class="dots four"></span></button>
<button><span class="dots three"></span></button>
<button><span class="dots two"></span></button>
<button><span class="dots one"></span></button>
</div>
</div>
</div>
</div>
答案 0 :(得分：1)
我知道的一种方法是你可以使用setTimeout()。
所以在编码中它将是：
$('.dot1').click(function(){
setTimeout( function(){alert("This actually works");}, 2000); // 2000 Means 2 Minutes
});
答案 1 :(得分：0)
首先你写得太糟糕了。很多重复。等
你有什么可以实现的？一个滑块，显示带有标题的图像？然后是一些圆圈（点），以便我们可以改变当前的图像？
现在有什么问题？