如何使模态在单击时显示，并且不再淡入和淡出滑块

Question

所以我有一个有 3 个模态的滑块。模态设置为一个间隔，在该间隔中，它们以渐变进入并覆盖幻灯片。用户单击幻灯片后，自动播放功能将停止，他们可以选择所需的任何图像。

问题是，模态以相同的间隔继续，并根据计时器弹出和弹出。如何在用户单击上一个或下一个箭头后使每个模态显示不再淡入淡出？

因此，在此示例中，"HI"、"HOW"、"ARE YOU？"将完全显示在其每个滑块中，并且一旦用户单击任一箭头，将不再淡入淡出。

$(document).ready(function() {
  $(".myModal").delay(3000).fadeIn().hide();
  $(".myModal2").delay(6000).fadeIn().hide();
  $(".myModal3").delay(9000).fadeIn().hide();
});
      
$(document).ready(setInterval(function() {
  $(".myModal").delay(3000).fadeIn().hide();
  $(".myModal2").delay(6000).fadeIn().hide();
  $(".myModal3").delay(9000).fadeIn().hide();
},12000)); 
 
var currentIndex = 0,
items = $('.container div'),
itemAmt = items.length;
//cycleItems function
function cycleItems(){
  var item = $('.container div').eq(currentIndex);
  items.hide();
  item.css('display', 'inline-block');
}; //end cycleItems function
//begin autoSlide function
var autoSlide = setInterval(function() {
  currentIndex ++;
  if( currentIndex > itemAmt -1){
    currentIndex = 0;
  }
  cycleItems();
},3000)
//end autoSlide function
//Next slider code
$('.next').click(function () {
  clearInterval(autoSlide);
  currentIndex += 1;
  if (currentIndex > itemAmt - 1){
    currentIndex = 0;
  }
  cycleItems();
});
//Previous slider code
$('.prev').click(function(){
  clearInterval(autoSlide);
  currentIndex -= 1;
  if(currentIndex < 0){
    currentIndex = itemAmt - 1;
   }
   cycleItems();
});

.container {
  width: 100%;
  background-color: black;
  margin: 0 auto;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.container div {
  width: 100%;
  display: inline-block;
  display: none;
}
.container img {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  text-align: center;
}
button {
  position: absolute;
}
.next {
  right: 5px;
  cursor: pointer;
  position: absolute;
  background-image: url('https://image.freepik.com/free-icon/arrow-bold-right-ios-7-symbol_318-35504.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100px;
  height: 100px;
  z-index: 500;
  top: 50%;
}
.prev {
  left: 5px;
  cursor: pointer;
  position: absolute;
  background-image: url('https://image.flaticon.com/icons/svg/17/17264.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100px;
  height: 100px;
  z-index: 500;
  top: 50%;
}
.image2 {
  background-image: url('https://upload.wikimedia.org/wikipedia/en/a/aa/Bart_Simpson_200px.png');
  background-position:center;
  display: block;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
.image3 {
  background-image: url('https://static.comicvine.com/uploads/square_small/11/114183/5147875-lisa_simpson.png');
  background-position:center;
  display: block;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
.image4 {
  background-image: url('https://vignette2.wikia.nocookie.net/simpsons/images/a/ab/BartSimpson.jpg/revision/latest?cb=20141101133153');
  background-position:center;
  display: block;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
.image1 {
  background-image: url('http://media.oregonlive.com/ent_impact_music/photo/9905096-large.jpg');
  background-size: contain;
  background-position:center;
  display: block;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  z-index: 200;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container image1">
  <div class="image1"></div>
  <div class="image2">
   <section class="myModal">HI</section>
  </div>
  <div class= "image3">
     <section class="myModal2">HOW</section>
  </div>
  <div class="image4">
     <section class="myModal3">ARE YOU?</section>
  </div>
</div>
<div class="next"></div>
<div class="prev"></div>

Answer 1

您正在双重定义自动幻灯片功能。下面是自动和手动滑块合并在一起以正常工作的示例。

$(document).ready(function() {
  var currentIndex = 0;
  var items = $('.container div');
  var itemAmt = items.length;
  //cycleItems function
  function cycleItems(direction, fade) {
    currentIndex += direction;
    if (currentIndex > itemAmt - 1) {
      currentIndex = 0;
    } else if (currentIndex < 0) {
      currentIndex = itemAmt - 1;
    }
    var item = items.eq(currentIndex);
    items.hide();
    if (fade) {
      item.fadeIn();
    } else {
      item.show();
    }
    
  };
  //end cycleItems function
  // start autoSlide
  cycleItems(1, true);
  var autoSlideInterval = setInterval(cycleItems, 3000, 1, true);
  //Next slider code
  $('.next').click(function() {
    clearInterval(autoSlideInterval);
    cycleItems(1, false);
  });
  //Previous slider code
  $('.prev').click(function() {
    clearInterval(autoSlideInterval);
    cycleItems(-1, false);
  });
});

.container {
  width: 100%;
  background-color: black;
  margin: 0 auto;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.container div {
  width: 100%;
  display: inline-block;
  display: none;
}
.container img {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  text-align: center;
}
button {
  position: absolute;
}
.next {
  right: 5px;
  cursor: pointer;
  position: absolute;
  background-image: url('https://image.freepik.com/free-icon/arrow-bold-right-ios-7-symbol_318-35504.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100px;
  height: 100px;
  z-index: 500;
  top: 50%;
}
.prev {
  left: 5px;
  cursor: pointer;
  position: absolute;
  background-image: url('https://image.flaticon.com/icons/svg/17/17264.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100px;
  height: 100px;
  z-index: 500;
  top: 50%;
}
.image2 {
  background-image: url('https://upload.wikimedia.org/wikipedia/en/a/aa/Bart_Simpson_200px.png');
  background-position: center;
  display: block;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
.image3 {
  background-image: url('https://static.comicvine.com/uploads/square_small/11/114183/5147875-lisa_simpson.png');
  background-position: center;
  display: block;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
.image4 {
  background-image: url('https://vignette2.wikia.nocookie.net/simpsons/images/a/ab/BartSimpson.jpg/revision/latest?cb=20141101133153');
  background-position: center;
  display: block;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
.image1 {
  background-image: url('http://media.oregonlive.com/ent_impact_music/photo/9905096-large.jpg');
  background-size: contain;
  background-position: center;
  display: block;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container image">
  <div class="image1">
    <br>
  </div>
  <div class="image2">
    <section class="myModal2">HI</section>
  </div>
  <div class="image3">
    <section class="myModal3">HOW</section>
  </div>
  <div class="image4">
    <section class="myModal4">ARE YOU?</section>
  </div>
</div>
<div class="next"></div>
<div class="prev"></div>