javascript - Jquery-在特定时间后自动将滚动条移动到特定位置

Question

这是我的 JsFiddle

如何在几秒后自动将滚动条向右移动(在第三张图像之后)并产生一些淡入淡出效果，以便用户可以看到下一组图像。

谁能告诉我如何使用 javascript 和 jquery 来完成。

这是我的HTML

<div class="gallery">
<div class="row">
<img class="normalimage" src="">
<!-- more images -->
</div>
<div class="row">
<img class="normalimage" src="">
<!-- more images -->
</div>
</div>

这是我的CSS:

.gallery .row {
white-space: nowrap;
}
.gallery img {
display: inline-block;
/* other properties */
}

Answer 1

这是一个简化的 jQuery 版本:

$(document).ready(function() {
  setInterval(function() {
    var A = $('.gallery').scrollLeft();
    if (A < 993) {
      $('.gallery').animate({
        scrollLeft: '+=331px'
      }, 300);
    }
    if (A >= 993) {
      $('.gallery').delay(400).animate({
        scrollLeft: 0
      }, 300);
    }
  }, 3000);
});

.gallery {
  background-color: #abcdef;
  width: 350px;
  height: 265px;
  overflow-x: scroll;
}
.gallery .row {
  white-space: nowrap;
}
.gallery img {
  display: inline-block;
  margin-left: 20px;
  margin-top: 20px;
}
.normalimage {
  height: 80px;
  width: 50px;
  border: 5px solid black;
}
.wideimage {
  height: 80px;
  width: 130px;
  border: 5px solid black;
}
img:last-of-type {
  margin-right: 20px;
  /* margin on last image */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery">
  <div class="row">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
  </div>
  <div class="row">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
  </div>
</div>

要在幻灯片之间添加一个简单的淡入淡出过渡，请添加:

$('.gallery').scroll(function() {
    var A = $('.gallery').scrollLeft();
    if (A === 0 || A === 331 || A === 662 || A === 993) {
      $('.gallery img').animate({
        opacity: 1
      }, 300);
    } else {
      $('.gallery img').css({
        opacity: 0
      });
    }
});

$(document).ready(function() {
  setInterval(function() {
    var A = $('.gallery').scrollLeft();
    if (A < 993) {
      $('.gallery').animate({
        scrollLeft: '+=331px'
      }, 300);
    }
    if (A >= 993) {
      $('.gallery').delay(400).animate({
        scrollLeft: 0
      }, 300);
    }
  }, 3000);
  $('.gallery').scroll(function() {
    var A = $('.gallery').scrollLeft();
    if (A === 0 || A === 331 || A === 662 || A === 993) {
      $('.gallery img').animate({
        opacity: 1
      }, 300);
    } else {
      $('.gallery img').css({
        opacity: 0
      });
    }
  });
});

.gallery {
  background-color: #abcdef;
  width: 350px;
  height: 265px;
  overflow-x: scroll;
}
.gallery .row {
  white-space: nowrap;
}
.gallery img {
  display: inline-block;
  margin-left: 20px;
  margin-top: 20px;
}
.normalimage {
  height: 80px;
  width: 50px;
  border: 5px solid black;
}
.wideimage {
  height: 80px;
  width: 130px;
  border: 5px solid black;
}
img:last-of-type {
  margin-right: 20px;
  /* margin on last image */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery">
  <div class="row">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
  </div>
  <div class="row">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
  </div>
</div>

和纯 CSS 版本:

.gallery {
  background-color: #abcdef;
  width: 350px;
  height: 265px;
  overflow-x: scroll;
}
.gallery .row {
  white-space: nowrap;
}
.gallery img {
  display: inline-block;
  margin-left: 20px;
  margin-top: 20px;
}
.normalimage {
  height: 80px;
  width: 50px;
  border: 5px solid black;
}
.wideimage {
  height: 80px;
  width: 130px;
  border: 5px solid black;
}
img:last-of-type {
  margin-right: 20px;
  /* margin on last image */
}
.gallery img {
  display: inline-block;
  margin-left: 20px;
  margin-top: 20px;
  animation: scroll 8s infinite;
}
@keyframes scroll {
  0% {
    opacity: 0;
  }
  6.25% {
    transform: translatex(0px);
    opacity: 1;
  }
  12.5% {
    transform: translatex(0px);
    opacity: 1;
  }
  18.75% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  31.25% {
    transform: translatex(-331px);
    opacity: 1;
  }
  37.5% {
    transform: translatex(-331px);
    opacity: 1;
  }
  43.75% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  56.25% {
    transform: translatex(-662px);
    opacity: 1;
  }
  62.5% {
    transform: translatex(-662px);
    opacity: 1;
  }
  68.75% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  81.25% {
    transform: translatex(-993px);
    opacity: 1;
  }
  87.5% {
    transform: translatex(-993px);
    opacity: 1;
  }
  93.75% {
    transform: translatex(-1324px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.gallery:hover img {
  animation: none;
}
.gallery:hover {
  overflow-x: scroll;
}

<div class="gallery">
  <div class="row">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
  </div>
  <div class="row">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
  </div>
</div>