Question

如何在推子内实现可点击的功能，并且功能与我下面的代码类似。 I.E.，当点击相应的点时，它会淡化到它所绑定的相应图像？我创建了点，它们可以转换成可点击的按钮，但是如何创建一个函数，该函数是什么？

＆＃13;

function cycleImages() {
  var $active = $('.image.active'); //get the active tab
  var $next = $active.next().length > 0 ? $active.next() : $('.image:first');
  //check next length if not present just get the first .image div
  //fade out the top image and remove active class from it in callback
  $active.animate({
    opacity: '0'
  }, 400, function() {
    $active.removeClass('active')
    $next.animate({
      opacity: '1'
    }, 400, function() {
      $next.addClass('active');
    })
  });
}

// run every 5s
setInterval(cycleImages, 5000);

＆＃13;

div.image div.caption {
  display: visible;
  position: absolute;
  overflow: hidden;
  z-index: 20;
  color: white;
  background-color: rgba(0,0,0,0.35);
  height: 20%;
  width: 100%;
  bottom: 0;
}

.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;
}

div.image:not(.active){
      display:none;  
}

.dots {
    float: right;
    background-color: rgba(65,45,30,0.5);
    border: none;
    border-radius: .85vw;
    display: inline-block;
    height: .85vw;
    width: .85vw;
    margin: .2em .2em .2em .2em;
}
.dots.active {
    background-color: #aa917d;
}

.dot-container {
  width: 20%;
  float: right;
  margin-right: .5em
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fader">
  <div class="image active">
    <img class="" src="https://images.contentful.com/256tjdsmm689/2T0QeKcvR6MSsckuKoYIwS/b57d12107fc5eb635e294ed1c76cbbac/feature-gettyimages.jpg" alt="" style="height: 100%; width:auto; object-fit: contain">
    <div class="caption">
      <span class="image-info">Lorem ipsum dolor sit amet</span>
      <div class="dot-container">
        <span class="dots"></span>
        <span class="dots"></span>
        <span class="dots"></span>
        <span class="dots"></span>
        <span class="dots active"></span>
      </div>
    </div>
  </div>
  <div class="image">
    <img class="" src="http://www.livemint.com/rf/Image-621x414/LiveMint/Period2/2016/04/09/Photos/DNAnocredit-kuAC--621x414@LiveMint.jpg" alt="" style="height: 100%; width:auto; object-fit: contain">
    <div class="caption">
      <span class="image-info">Lorem ipsum dolor sit amet</span>
      <div class="dot-container">
        <span class="dots"></span>
        <span class="dots"></span>
        <span class="dots"></span>
        <span class="dots active"></span>
        <span class="dots"></span>
      </div>
    </div>
  </div>
  <div class="image">
    <img class="" src="http://i.dailymail.co.uk/i/pix/2016/03/22/13/32738CEB00000578-3504412-image-a-4_1458654503277.jpg" alt="" style="height: 100%; width:auto; object-fit: contain">
    <div class="caption">
      <span class="image-info">Lorem ipsum dolor sit amet</span>
      <div class="dot-container">
        <span class="dots"></span>
        <span class="dots"></span>
        <span class="dots active"></span>
        <span class="dots"></span>
        <span class="dots"></span>
      </div>
    </div>
  </div>
  <div class="image">
    <img lass="" src="http://static.bigstockphoto.com/images/homepage/2016_bigstock_video.jpg" alt="" style="height: 100%; width:auto; object-fit: contain">
    <div class="caption">
      <span class="image-info">Lorem ipsum dolor sit amet</span>
      <div class="dot-container">
        <span class="dots"></span>
        <span class="dots active"></span>
        <span class="dots"></span>
        <span class="dots"></span>
        <span class="dots"></span>
      </div>
    </div>
  </div>
  <div class="image">
    <img class="" src="http://media.tinmoitruong.vn/public/media/media/picture/03/kh4.jpg" alt="" style="height: 100%; width:auto; object-fit: contain">
    <div class="caption">
      <span class="image-info">Lorem ipsum dolor sit amet</span>
      <div class="dot-container">
        <span class="dots active"></span>
        <span class="dots"></span>
        <span class="dots"></span>
        <span class="dots"></span>
        <span class="dots"></span>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

您需要做一些事情才能用点来浏览幻灯片：

循环点元素，将属性应用于每个点（一个数字，从0或1开始），并为每个点递增一个。
循环显示图像，将属性应用于每个图像（一个数字，从0或1开始），并为每个点递增1。（就像点点一样）
将点击事件处理程序添加到将获取该特定点的数字属性的点，并显示具有相同数字属性的图像。
删除每张幻灯片上的点的标记，而不是所有幻灯片只有一组点（这需要调整HTML / CSS）

我建议查看具有此功能的现有轮播，以便更好地理解代码。看看这个blog post from Barrel titled "Building a Responsive jQuery Carousel Plugin from Scratch.“它具有您正在寻找的功能。

jQuery推子点互动功能

1 个答案: