如何在滑块上进行自动播放而不是.on点击功能

时间：2017-09-05 15:53:35

标签： javascript jquery slider carousel

我正在使用我在bootsnipp上找到的这个滑块代码并且它工作得非常好，但我希望幻灯片是自动播放而不是点击左右底部以触发功能所需。

我想它可能适用于一个简单的函数或一些代码行，但我不是很好写js代码，我希望有人可以帮助我。

这是滑块

$(document).ready(function() {

  var sliding = false,
      curSlide = 1,
      numOfSlides = $(".slider--el").length;

  $(document).on("click", ".slider--control", function() {
    if (sliding) return;
    sliding = true;
    $(".slider--el").show();
    $(".slider--el").css("top");
    $(".slider--el.active").addClass("removed");
    ($(this).hasClass("right")) ? curSlide++ : curSlide--;
    if (curSlide < 1) curSlide = numOfSlides;
    if (curSlide > numOfSlides) curSlide = 1;
    $(".slider--el-" + curSlide).addClass("next");

    setTimeout(function() {
      $(".slider--el.removed").hide();
      $(".slider--el").removeClass("active next removed");
      $(".slider--el-" + curSlide).addClass("active");
      sliding = false;
    }, 1800);
  });

});
/* ESTILOS DE SLIDER */


button,
input {
  outline: none;
  border: none;
}

.slider {
  position: relative;
  height: 100%;
  z-index: 0;
  margin-top: 2em;
}
.slider--control {
  z-index: 50;
  position: absolute;
  top: calc(50% - 1.4rem);
  width: 1.7rem;
  height: 2.8rem;
  cursor: pointer;
}
.slider--control.left {
  left: 3rem;
}
.slider--control.right {
  right: 3rem;
}
.slider--control:after {
  content: "";
  position: absolute;
  display: block;
  top: -0.6rem;
  left: -1.15rem;
  width: 4rem;
  height: 4rem;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
}
.slider--el {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: z-index 0.1s, -webkit-transform 2.8s;
  transition: z-index 0.1s, -webkit-transform 2.8s;
  transition: transform 2.8s, z-index 0.1s;
  transition: transform 2.8s, z-index 0.1s, -webkit-transform 2.8s;
  overflow: hidden;
}
.slider--el.active {
  z-index: 10;
}
.slider--el.active .slider--el-bg {
  -webkit-transform: scale(0.834);
          transform: scale(0.834);
}
.slider--el.active .slider--el-content {
  opacity: 1;
}
.slider--el.next {
  z-index: 5;
}
.slider--el.next .slider--el-bg {
  -webkit-transform: scale(0.834);
          transform: scale(0.834);
}
.slider--el.anim-5parts .part {
  position: absolute;
  top: 0;
  width: 20.1%;
  height: 100%;
  overflow: hidden;
  will-change: transform;
}
.slider--el.anim-5parts .part:before {
  content: "";
  display: block;
  position: absolute;
  background-size: cover;
  top: 0;
  width: 500%;
  height: 100%;
  background-image: url("https://cdna.artstation.com/p/assets/images/images/003/242/846/large/alice-vx-background-0.jpg?1471535309");
}
.slider--el.anim-5parts .part.part-1 {
  -webkit-transition: -webkit-transform 1.1s 0.3s;
  transition: -webkit-transform 1.1s 0.3s;
  transition: transform 1.1s 0.3s;
  transition: transform 1.1s 0.3s, -webkit-transform 1.1s 0.3s;
  left: 0%;
}
.slider--el.anim-5parts .part.part-1:before {
  left: 0%;
}
.slider--el.anim-5parts .part.part-2 {
  -webkit-transition: -webkit-transform 1.1s 0.5s;
  transition: -webkit-transform 1.1s 0.5s;
  transition: transform 1.1s 0.5s;
  transition: transform 1.1s 0.5s, -webkit-transform 1.1s 0.5s;
  left: 20%;
}
.slider--el.anim-5parts .part.part-2:before {
  left: -100%;
}
.slider--el.anim-5parts .part.part-3 {
  -webkit-transition: -webkit-transform 1.1s 0.7s;
  transition: -webkit-transform 1.1s 0.7s;
  transition: transform 1.1s 0.7s;
  transition: transform 1.1s 0.7s, -webkit-transform 1.1s 0.7s;
  left: 40%;
}
.slider--el.anim-5parts .part.part-3:before {
  left: -200%;
}
.slider--el.anim-5parts .part.part-4 {
  -webkit-transition: -webkit-transform 1.1s 0.5s;
  transition: -webkit-transform 1.1s 0.5s;
  transition: transform 1.1s 0.5s;
  transition: transform 1.1s 0.5s, -webkit-transform 1.1s 0.5s;
  left: 60%;
}
.slider--el.anim-5parts .part.part-4:before {
  left: -300%;
}
.slider--el.anim-5parts .part.part-5 {
  -webkit-transition: -webkit-transform 1.1s 0.3s;
  transition: -webkit-transform 1.1s 0.3s;
  transition: transform 1.1s 0.3s;
  transition: transform 1.1s 0.3s, -webkit-transform 1.1s 0.3s;
  left: 80%;
}
.slider--el.anim-5parts .part.part-5:before {
  left: -400%;
}
.slider--el.anim-5parts.removed .part {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}
.slider--el.anim-9parts .slider--el-bg {
  -webkit-perspective: 2000;
          perspective: 2000;
}
.slider--el.anim-9parts .part {
  position: absolute;
  width: 33.5%;
  height: 33.5%;
  overflow: hidden;
  will-change: transform;
  -webkit-transform-origin: 0% 100%;
          transform-origin: 0% 100%;
}
.slider--el.anim-9parts .part:before {
  content: "";
  display: block;
  position: absolute;
  background-size: cover;
  width: 300%;
  height: 300%;
  background-image: url("http://www.amalgamestudio.com/SwissMadeVFX/MG/MG_Planet_VFX.jpg");
}
.slider--el.anim-9parts .part.left-top {
  top: 0%;
  left: 0%;
  -webkit-transition: opacity 0.6s 0.9s, -webkit-transform 0.9s 0.5s cubic-bezier(0.58, -0.7, 0.59, 0.95);
  transition: opacity 0.6s 0.9s, -webkit-transform 0.9s 0.5s cubic-bezier(0.58, -0.7, 0.59, 0.95);
  transition: transform 0.9s 0.5s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 0.9s;
  transition: transform 0.9s 0.5s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 0.9s, -webkit-transform 0.9s 0.5s cubic-bezier(0.58, -0.7, 0.59, 0.95);
}
.slider--el.anim-9parts .part.left-top:before {
  top: 0%;
  left: 0%;
}
.slider--el.anim-9parts .part.mid-top {
  top: 0%;
  left: 33.33333%;
  -webkit-transition: opacity 0.6s 0.8s, -webkit-transform 0.9s 0.4s cubic-bezier(0.58, -0.7, 0.59, 0.95);
  transition: opacity 0.6s 0.8s, -webkit-transform 0.9s 0.4s cubic-bezier(0.58, -0.7, 0.59, 0.95);
  transition: transform 0.9s 0.4s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 0.8s;
  transition: transform 0.9s 0.4s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 0.8s, -webkit-transform 0.9s 0.4s cubic-bezier(0.58, -0.7, 0.59, 0.95);
}
.slider--el.anim-9parts .part.mid-top:before {
  top: 0%;
  left: -100%;
}
.slider--el.anim-9parts .part.right-top {
  top: 0%;
  left: 66.66667%;
  -webkit-transition: opacity 0.6s 0.9s, -webkit-transform 0.9s 0.5s cubic-bezier(0.58, -0.7, 0.59, 0.95);
  transition: opacity 0.6s 0.9s, -webkit-transform 0.9s 0.5s cubic-bezier(0.58, -0.7, 0.59, 0.95);
  transition: transform 0.9s 0.5s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 0.9s;
  transition: transform 0.9s 0.5s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 0.9s, -webkit-transform 0.9s 0.5s cubic-bezier(0.58, -0.7, 0.59, 0.95);
}
.slider--el.anim-9parts .part.right-top:before {
  top: 0%;
  left: -200%;
}
.slider--el.anim-9parts .part.left-mid {
  top: 33.33333%;
  left: 0%;
  -webkit-transition: opacity 0.6s 1s, -webkit-transform 0.9s 0.6s cubic-bezier(0.58, -0.7, 0.59, 0.95);
  transition: opacity 0.6s 1s, -webkit-transform 0.9s 0.6s cubic-bezier(0.58, -0.7, 0.59, 0.95);
  transition: transform 0.9s 0.6s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1s;
  transition: transform 0.9s 0.6s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1s, -webkit-transform 0.9s 0.6s cubic-bezier(0.58, -0.7, 0.59, 0.95);
}
.slider--el.anim-9parts .part.left-mid:before {
  top: -100%;
  left: 0%;
}
.slider--el.anim-9parts .part.mid-mid {
  top: 33.33333%;
  left: 33.33333%;
  -webkit-transition: opacity 0.6s 0.7s, -webkit-transform 0.9s 0.3s cubic-bezier(0.58, -0.7, 0.59, 0.95);
  transition: opacity 0.6s 0.7s, -webkit-transform 0.9s 0.3s cubic-bezier(0.58, -0.7, 0.59, 0.95);
  transition: transform 0.9s 0.3s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 0.7s;
  transition: transform 0.9s 0.3s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 0.7s, -webkit-transform 0.9s 0.3s cubic-bezier(0.58, -0.7, 0.59, 0.95);
}
.slider--el.anim-9parts .part.mid-mid:before {
  top: -100%;
  left: -100%;
}
.slider--el.anim-9parts .part.right-mid {
  top: 33.33333%;
  left: 66.66667%;
  -webkit-transition: opacity 0.6s 1s, -webkit-transform 0.9s 0.6s cubic-bezier(0.58, -0.7, 0.59, 0.95);
  transition: opacity 0.6s 1s, -webkit-transform 0.9s 0.6s cubic-bezier(0.58, -0.7, 0.59, 0.95);
  transition: transform 0.9s 0.6s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1s;
  transition: transform 0.9s 0.6s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1s, -webkit-transform 0.9s 0.6s cubic-bezier(0.58, -0.7, 0.59, 0.95);
}
.slider--el.anim-9parts .part.right-mid:before {
  top: -100%;
  left: -200%;
}
.slider--el.anim-9parts .part.left-bot {
  top: 66.66667%;
  left: 0%;
  -webkit-transition: opacity 0.6s 1.1s, -webkit-transform 0.9s 0.7s cubic-bezier(0.58, -0.7, 0.59, 0.95);
  transition: opacity 0.6s 1.1s, -webkit-transform 0.9s 0.7s cubic-bezier(0.58, -0.7, 0.59, 0.95);
  transition: transform 0.9s 0.7s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1.1s;
  transition: transform 0.9s 0.7s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1.1s, -webkit-transform 0.9s 0.7s cubic-bezier(0.58, -0.7, 0.59, 0.95);
}
.slider--el.anim-9parts .part.left-bot:before {
  top: -200%;
  left: 0%;
}
.slider--el.anim-9parts .part.mid-bot {
  top: 66.66667%;
  left: 33.33333%;
  -webkit-transition: opacity 0.6s 1.2s, -webkit-transform 0.9s 0.8s cubic-bezier(0.58, -0.7, 0.59, 0.95);
  transition: opacity 0.6s 1.2s, -webkit-transform 0.9s 0.8s cubic-bezier(0.58, -0.7, 0.59, 0.95);
  transition: transform 0.9s 0.8s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1.2s;
  transition: transform 0.9s 0.8s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1.2s, -webkit-transform 0.9s 0.8s cubic-bezier(0.58, -0.7, 0.59, 0.95);
}
.slider--el.anim-9parts .part.mid-bot:before {
  top: -200%;
  left: -100%;
}
.slider--el.anim-9parts .part.right-bot {
  top: 66.66667%;
  left: 66.66667%;
  -webkit-transition: opacity 0.6s 1.1s, -webkit-transform 0.9s 0.7s cubic-bezier(0.58, -0.7, 0.59, 0.95);
  transition: opacity 0.6s 1.1s, -webkit-transform 0.9s 0.7s cubic-bezier(0.58, -0.7, 0.59, 0.95);
  transition: transform 0.9s 0.7s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1.1s;
  transition: transform 0.9s 0.7s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1.1s, -webkit-transform 0.9s 0.7s cubic-bezier(0.58, -0.7, 0.59, 0.95);
}
.slider--el.anim-9parts .part.right-bot:before {
  top: -200%;
  left: -200%;
}
.slider--el.anim-9parts.removed .part {
  -webkit-transform: rotateX(90deg);
          transform: rotateX(90deg);
  opacity: 0;
}
.slider--el.anim-3parts .part {
  position: absolute;
  top: 0;
  width: 33.5%;
  height: 100%;
  overflow: hidden;
  -webkit-transition: -webkit-transform 1.5s 0.3s;
  transition: -webkit-transform 1.5s 0.3s;
  transition: transform 1.5s 0.3s;
  transition: transform 1.5s 0.3s, -webkit-transform 1.5s 0.3s;
  will-change: transform;
}
.slider--el.anim-3parts .part:before {
  content: "";
  display: block;
  position: absolute;
  background-size: cover;
  width: 300%;
  height: 100%;
  background-image: url("http://hannahwarren.info/images/layout/background_hannah_warren_thumbnail.png");
}
.slider--el.anim-3parts .part.left {
  left: 0;
}
.slider--el.anim-3parts .part.left:before {
  left: 0;
}
.slider--el.anim-3parts .part.mid {
  left: 33.33333%;
}
.slider--el.anim-3parts .part.mid:before {
  left: -100%;
}
.slider--el.anim-3parts .part.right {
  left: 66.66667%;
}
.slider--el.anim-3parts .part.right:before {
  left: -200%;
}
.slider--el.anim-3parts.removed .left {
  -webkit-transform: translate3D(-100%, -33.333%, 0);
          transform: translate3D(-100%, -33.333%, 0);
}
.slider--el.anim-3parts.removed .mid {
  -webkit-transform: translate3D(0, 100%, 0);
          transform: translate3D(0, 100%, 0);
}
.slider--el.anim-3parts.removed .right {
  -webkit-transform: translate3D(100%, -33.333%, 0);
          transform: translate3D(100%, -33.333%, 0);
}
.slider--el.anim-4parts .part {
  position: absolute;
  width: 50.2%;
  height: 50.2%;
  overflow: hidden;
  will-change: transform;
}
.slider--el.anim-4parts .part:before {
  content: "";
  display: block;
  position: absolute;
  background-size: cover;
  width: 200%;
  height: 200%;
  background-image: url("http://harmony-wellness.org/wp-content/uploads/2014/06/Warrior-e1403846282811.jpg");
}
.slider--el.anim-4parts .part.top {
  top: 0;
  -webkit-transition: -webkit-transform 1.3s 0.3s;
  transition: -webkit-transform 1.3s 0.3s;
  transition: transform 1.3s 0.3s;
  transition: transform 1.3s 0.3s, -webkit-transform 1.3s 0.3s;
}
.slider--el.anim-4parts .part.top:before {
  top: 0;
}
.slider--el.anim-4parts .part.bot {
  top: 50%;
  -webkit-transition: -webkit-transform 1.3s 0.5s;
  transition: -webkit-transform 1.3s 0.5s;
  transition: transform 1.3s 0.5s;
  transition: transform 1.3s 0.5s, -webkit-transform 1.3s 0.5s;
}
.slider--el.anim-4parts .part.bot:before {
  top: -100%;
}
.slider--el.anim-4parts .part.left {
  left: 0;
}
.slider--el.anim-4parts .part.left:before {
  left: 0;
}
.slider--el.anim-4parts .part.right {
  left: 50%;
}
.slider--el.anim-4parts .part.right:before {
  left: -100%;
}
.slider--el.anim-4parts.removed .left {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
.slider--el.anim-4parts.removed .right {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
.slider--el-bg {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background-size: cover;
  -webkit-transition: -webkit-transform 1s 1s;
  transition: -webkit-transform 1s 1s;
  transition: transform 1s 1s;
  transition: transform 1s 1s, -webkit-transform 1s 1s;
  will-change: transform;
}
.slider--el-bg .part:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.15);
}
.slider--el-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20rem;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  opacity: 0;
}
.slider--el-heading {
  font-size: 9rem;
  font-family: Tesla;
  text-transform: uppercase;
  color: #fff;
}
.slider--el.removed .slider--el-content {
  opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="" style="height: 600px;">
   <div class="slider">
  <div class="slider--el slider--el-1 anim-4parts active">
    <div class="slider--el-bg">
      <div class="part top left"></div>
      <div class="part top right"></div>
      <div class="part bot left"></div>
      <div class="part bot right"></div>
    </div>
    <div class="slider--el-content">
      <h2 class="slider--el-heading"></h2>
    </div>
  </div>
  <div class="slider--el slider--el-2 anim-9parts">
    <div class="slider--el-bg">
      <div class="part left-top"></div>
      <div class="part mid-top"></div>
      <div class="part right-top"></div>
      <div class="part left-mid"></div>
      <div class="part mid-mid"></div>
      <div class="part right-mid"></div>
      <div class="part left-bot"></div>
      <div class="part mid-bot"></div>
      <div class="part right-bot"></div>
    </div>
    <div class="slider--el-content">
      <h2 class="slider--el-heading"></h2>
    </div>
  </div>
  <div class="slider--el slider--el-3 anim-5parts">
    <div class="slider--el-bg">
      <div class="part part-1"></div>
      <div class="part part-2"></div>
      <div class="part part-3"></div>
      <div class="part part-4"></div>
      <div class="part part-5"></div>
    </div>
    <div class="slider--el-content">
      <h2 class="slider--el-heading"></h2>
    </div>
  </div>
  <div class="slider--el slider--el-4 anim-3parts">
    <div class="slider--el-bg">
      <div class="part left"></div>
      <div class="part mid"></div>
      <div class="part right"></div>
    </div>
    <div class="slider--el-content">
      <h2 class="slider--el-heading"></h2>
    </div>
  </div>
  <span class="slider--control left"></span>
  <span class="slider--control right"></span>
</div>
    
 </div>

2 个答案:

答案 0 :(得分：2)

对于一个简单的解决方案，您可以使用setInterval和jquery的.click（）函数 用于在某个特定时间间隔内滑块右侧btn上调用onclick函数

:inet.parse_address('192.168.42.2')

DEMO：http://jsbin.com/yazoluzike/2/edit?html,js,output

答案 1 :(得分：0)

您可以使用Javascript setTimeout函数： https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

如果你想重复这个，你可以使用递归调用（从内部调用函数）

$(document).ready(function() {

var sliding = false,
    curSlide = 1,
    numOfSlides = $(".slider--el").length;

$(document).on("click", ".slider--control", function() {
    if (sliding) return;
    sliding = true;
    $(".slider--el").show();
    $(".slider--el").css("top");
    $(".slider--el.active").addClass("removed");
    ($(this).hasClass("right")) ? curSlide++ : curSlide--;
    if (curSlide < 1) curSlide = numOfSlides;
    if (curSlide > numOfSlides) curSlide = 1;
    $(".slider--el-" + curSlide).addClass("next");

    setTimeout(function() {
        $(".slider--el.removed").hide();
        $(".slider--el").removeClass("active next removed");
        $(".slider--el-" + curSlide).addClass("active");
        sliding = false;
    }, 1800);
});

function clickDocument() {
    $(document).click();
    setTimeout(clickDocument(), 5000);
}

clickDocument();});
相关问题
最新问题