jQuery 滑块 - 添加自动播放选项

Question

我正在使用 jQuery 幻灯片插件，但它没有自动播放选项。目前，触发幻灯片的唯一方法是单击左右箭头。

有人有解决办法吗？我做了一些研究，但找不到提出解决方案的人，而且原来的开发人员似乎不再编码了。

下面是我在 codepen 上使用的滑块。

(function() {
  var carouselContent, carouselIndex, carouselLength, firstClone, firstItem, isAnimating, itemWidth, lastClone, lastItem;

  carouselContent = $(".carousel__content");
  carouselIndex = 0;
  carouselLength = carouselContent.children().length;
  isAnimating = false;
  itemWidth = 100 / carouselLength;
  firstItem = $(carouselContent.children()[0]);
  lastItem = $(carouselContent.children()[carouselLength - 1]);
  firstClone = null;
  lastClone = null;
  carouselContent.css("width", carouselLength * 100 + "%");
  carouselContent.transition({
    x: (carouselIndex * -itemWidth) + "%"
  }, 0);
  $.each(carouselContent.children(), function() {
    return $(this).css("width", itemWidth + "%");
  });

  $(".nav--left").on("click", function() {
    if (isAnimating) {
      return;
    }
    isAnimating = true;
    carouselIndex--;
    if (carouselIndex === -1) {
      lastItem.prependTo(carouselContent);
      carouselContent.transition({
        x: ((carouselIndex + 2) * -itemWidth) + "%"
      }, 0);
      return carouselContent.transition({
        x: ((carouselIndex + 1) * -itemWidth) + "%"
      }, 1000, "easeInOutExpo", function() {
        carouselIndex = carouselLength - 1;
        lastItem.appendTo(carouselContent);
        carouselContent.transition({
          x: (carouselIndex * -itemWidth) + "%"
        }, 0);
        return isAnimating = false;
      });
    } else {
      return carouselContent.transition({
        x: (carouselIndex * -itemWidth) + "%"
      }, 1000, "easeInOutExpo", function() {
        return isAnimating = false;
      });
    }
  });

  $(".nav--right").on("click", function() {
    if (isAnimating) {
      return;
    }
    isAnimating = true;
    carouselIndex++;
    return carouselContent.transition({
      x: (carouselIndex * -itemWidth) + "%"
    }, 1000, "easeInOutExpo", function() {
      isAnimating = false;
      if (firstClone) {
        carouselIndex = 0;
        carouselContent.transition({
          x: (carouselIndex * -itemWidth) + "%"
        }, 0);
        firstClone.remove();
        firstClone = null;
        carouselLength = carouselContent.children().length;
        itemWidth = 100 / carouselLength;
        carouselContent.css("width", carouselLength * 100 + "%");
        $.each(carouselContent.children(), function() {
          return $(this).css("width", itemWidth + "%");
        });
        return;
      }
      if (carouselIndex === carouselLength - 1) {
        carouselLength++;
        itemWidth = 100 / carouselLength;
        firstClone = firstItem.clone();
        firstClone.addClass("clone");
        firstClone.appendTo(carouselContent);
        carouselContent.css("width", carouselLength * 100 + "%");
        $.each(carouselContent.children(), function() {
          return $(this).css("width", itemWidth + "%");
        });
        return carouselContent.transition({
          x: (carouselIndex * -itemWidth) + "%"
        }, 0);
      }
    });
  });

}).call(this);

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body, html {
  font-family: "europa-1","europa-2", sans-serif;
  overflow: hidden;
}

.wrapper {
  max-width: 940px;
  width: 100%;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}

/**
 * Use this wrapper only for demo purposes
 * So you can show the items outside the wrapper
 */
.wrapper--demo {
  overflow: visible;
}
.wrapper--demo:after, .wrapper--demo:before {
  content: "";
  position: absolute;
  width: 800px;
  height: 100%;
  top: 0;
  left: 100%;
  background: rgba(255, 255, 255, 0.8);
  z-index: 2;
}
.wrapper--demo:before {
  left: -800px;
}

.carousel {
  width: 100%;
  position: relative;
}
.carousel .carousel__content {
  width: auto;
  position: relative;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transition: translate3d(0, 0, 0);
}
.carousel .carousel__content .item {
  display: block;
  float: left;
  width: 100%;
  position: relative;
}
.carousel .carousel__content .item .title {
  position: absolute;
  top: 50%;
  left: 0;
  margin: -33px 0 0 0;
  padding: 0;
  font-size: 3rem;
  width: 100%;
  text-align: center;
  letter-spacing: .3rem;
  color: #FFF;
}
.carousel .carousel__content .item .title--sub {
  margin-top: 20px;
  font-size: 1.2em;
  opacity: .5;
}
.carousel .carousel__content .item img {
  width: 100%;
  max-width: 100%;
  display: block;
}
.carousel .carousel__nav {
  position: absolute;
  width: 100%;
  top: 50%;
  margin-top: -17px;
  left: 0;
  z-index: 1;
}
.carousel .carousel__nav .nav {
  position: absolute;
  top: 0;
  color: #000;
  background: #FFF;
  padding: 8px 12px;
  font-weight: bold;
  text-decoration: none;
  font-size: .8rem;
  transition: padding .25s ease;
}
.carousel .carousel__nav .nav:hover {
  padding: 8px 20px;
}
.carousel .carousel__nav .nav--left {
  border-radius: 0px 3px 3px 0px;
}
.carousel .carousel__nav .nav--right {
  right: 0;
  border-radius: 3px 0px 0px 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.9/jquery.transit.min.js"></script>


<div class="wrapper wrapper--demo">
 <div class="carousel">
  <div class="carousel__content">
   <div class="item">
        <p class="title">First</p>
        <img src="http://placehold.it/1800x850/70AD96/FFF&text=&nbsp;" alt="">
      </div>
   <div class="item">
        <p class="title">Second</p>
        <img src="http://placehold.it/1800x850/EA4E23/FFF&text=&nbsp;" alt="">
      </div>
   <div class="item">
        <p class="title">Third</p>
        <img src="http://placehold.it/1800x850/9BA452/FFF&text=&nbsp;" alt="">
      </div>
   <div class="item">
        <p class="title">Fourth</p>
        <img src="http://placehold.it/1800x850/472D38/FFF&text=&nbsp;" alt="">
      </div>
   <div class="item">
        <p class="title">Fifth</p>
        <img src="http://placehold.it/1800x850/F77C85/FFF&text=&nbsp;" alt="">
      </div>
   <div class="item">
        <p class="title">Sixth</p>
        <p class="title title--sub">Last Item</p>
        <img src="http://placehold.it/1800x850/00FFAE/FFF&text=&nbsp;" alt="">
      </div>
  </div>
    
    <div class="carousel__nav">
      <a href="#" class="nav nav--left">Previous</a>
      <a href="#" class="nav nav--right">Next</a>
    </div>
    
 </div>
</div>

Answer 1

使用 jQuery .click() 模拟用户点击相应的 DOM 元素，在您的例子中是 $(".nav--left").click() & $(".nav--right").click()。
使用setInterval达到想要的"autplay effect"。

这应该可以快速完成；只需 将其附加到您现有的脚本中。玩得开心 working Forked PEN（底部还有一个 link 到高级）。

JavaScript:

var autoSlide = function( sDirection ) {
    sDirection === 'left' || sDirection = 'right';
    $( '.nav--' + sDirection ).click(); // ".nav--left" or ".nav--right"
};

setInterval( function() {
    autoSlide(); // with default direction: 'right'
    // autoSlide( 'left' ) // slide left 
}, 1000 ); // every 1000 milliseconds

咖啡脚本：

autoSlide = ( sDirection ) ->
    sDirection == 'left' || sDirection = 'right'
    $( ".nav--#{sDirection}" ).click()

setInterval(
    -> autoSlide() # with default direction: 'right'
    # autoSlide( 'left' ) # slide left
    1000 # every second
)

我只发布了最新消息而不是重复您的答案片段！如果您对自定义或一般功能有任何疑问，请随时发表评论。

PEN with advanced control capabilities.

简化版（精简到最基本的部分）：

setInterval(function() { $('.nav--right').click() }, 1000 );

或另一个方向，速度减半：

setInterval(function() { $('.nav--left').click() }, 2000 );

jQuery 滑块 - 添加自动播放选项

jQuery Slider - Adding Autoplay Option

javascript

jquery

slider

slideshow

carousel