1

基本上我只是为了教育目的而尝试做一些随机的 jQuery 东西，这是我非常简单的滑块。我希望它能够自动工作并且还可以使用控件（小箭头滚动到下一个/上一个滑块）。我现在唯一的问题是，当您按下箭头时，每 5 秒自动切换幻灯片的功能仍在计算这 5000 毫秒，因此下一张幻灯片出现的速度比预期的要快。我想要的是让这些箭头重置计时器，所以你按下箭头->下一张幻灯片出现->仅在 5 秒后幻灯片再次切换。对不起，草率的解释，希望我说得足够清楚。

这是 jsfiddle：http: //jsfiddle.net/cA9aW/

这是代码

HTML

<body>
<div id="wrapper">
    <header>
         <h1>Simplest Sliding Image Slider</h1>

    </header>
    <div id="content">
        <div id="slider_container">
            <div id="slider">
                <div class="slides" id="slide1">
                    <img src="http://s2.postimg.org/5uxqi0mgl/cats1.jpg" alt="" />
                </div>
                <div class="slides" id="slide2">
                    <img src="http://s2.postimg.org/66f6us2wl/cats2.jpg" alt="" />
                </div>
                <div class="slides" id="slide3">
                    <img src="http://s2.postimg.org/ai3sjs9th/cats3.jpg" alt="" />
                </div>
            </div>
        </div>
    </div>
    <footer></footer>
    </div>
</body>

JS

jQuery(document).ready(function($) {

// start slider function
startSlider();

// set width and step variables and add active class to first slider
var slideWidth = $('.slides').width();
$('#slide1').addClass('slides active');

// actual function
function startSlider() {

looper = setInterval(function() {
  // remove and add class active
  $('.active').removeClass('active').next().addClass('active');

  // animation expression
  $('.active').animate({'left': '-=' + (slideWidth) + 'px'}, 500);
  $('.active').siblings().animate({'left': '-=' + (slideWidth) + 'px'}, 500);

  // return to first slide after the last one
  if($('.active').length == 0) {
    $('#slide1').addClass('active');
    $('.slides').animate({'left': 0}, 500);

  }
}, 5000); // interval


// adding controls
$('.slides').append("<div class='controls'><a class='control_left' href='#'></a><a class='control_right' href='#'></a></div>");

// remove unnecessary controlls on first and last slides
$('.slides:nth-child(1) a.control_left').remove();
$(".slides:nth-child(" + $('.slides').length + ") a.control_right").remove();

// add functionality to controls
$('.control_left').on('click', function() {
  $('.active').removeClass('active').prev().addClass('active');
  $('.active').animate({'left': '+=' + (slideWidth) + 'px'}, 500);
  $('.active').siblings().animate({'left': '+=' + (slideWidth) + 'px'}, 500);
});

$('.control_right').on('click', function() {
  $('.active').removeClass('active').next().addClass('active');
  $('.active').animate({'left': '-=' + (slideWidth) + 'px'}, 500);
  $('.active').siblings().animate({'left': '-=' + (slideWidth) + 'px'}, 500);
});



}

});

提前很多

4

2 回答 2

3

带有上一个/下一个按钮的幻灯片，自动滑动，悬停暂停

代替 jQuery.animate()和动画leftCSS 属性，使用 GPU 加速 CSStransform: translateX来在一个常见的幻灯片包装元素上制作动画

$(".SlideShow").each((i, EL) => {

  const
    $parent = $(EL),
    $slides = $(".SlideShow-slides", EL),
    $item = $(".SlideShow-item", EL),
    $prevNext = $(".SlideShow-btn", EL),
    tot = $item.length,
    mod = (n, m) => ((n % m) + m) % m;

  let
    c = 0,
    itv;

  const prev = () => {c = mod(--c, tot); anim();};
  const next = () => {c = mod(++c, tot); anim();};
  const anim = () => $slides.css({transform: `translateX(-${c * 100}%)`});
  const stop = () => clearInterval(itv);
  const play = () => itv = setInterval(next, 4000);
  
  $prevNext.on("click", (ev) => $(ev.currentTarget).is(".next") ? next() : prev());
  $parent.hover(stop, play);
  play(); // start

});
.SlideShow {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 180px;
}

.SlideShow-slides {
  display: flex;
  flex-flow: row-nowrap;
  height: 100%;
  width: 100%;
  transition: transform 0.7s; /* Animation duration here */
}

.SlideShow-item {
  min-width: 100%;
}

.SlideShow-item>img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.SlideShow-btn {
  position: absolute;
  top: 0;
  z-index: 1;
  width: 50px;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0.5;
  border: 0;
  cursor: pointer;
}

.SlideShow-btn:hover {
  opacity: 1;
}

.SlideShow-btn.next {
  right: 0px;
}
<div class="SlideShow">
  <div class="SlideShow-slides">
    <div class="SlideShow-item"><img src="http://placehold.it/600x400/0bf?text=A" alt=""></div>
    <div class="SlideShow-item"><img src="http://placehold.it/600x400/fb0?text=B" alt=""></div>
    <div class="SlideShow-item"><img src="http://placehold.it/600x400/0fb?text=C" alt=""></div>
  </div>
  <button type="button" class="SlideShow-btn prev"></button>
  <button type="button" class="SlideShow-btn next"></button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

于 2013-09-28T16:22:46.150 回答
1

你需要做什么来清除按钮点击的间隔并重新开始间隔。

function resetInterval(){ //add this method which wil reset the timer
        window.clearInterval(looper); //clear current interval
        looper = setInterval(autoSlide, 5000); //start auto slide again.
}
function autoSlide(){ //move this to a function from being anonymous
        // remove and add class active
        $('.active').removeClass('active').next().addClass('active');
        // animation expression
        $('.active').animate({
            'left': '-=' + (slideWidth) + 'px'
        }, 500);
        $('.active').siblings().animate({
            'left': '-=' + (slideWidth) + 'px'
        }, 500);

        // return to first slide after the last one
        if ($('.active').length === 0) {
            $('#slide1').addClass('active');
            $('.slides').animate({
                'left': 0
            }, 500);
        }
}

和

 $('.control_left').on('click', function () {
        resetInterval(); //reset it
 ....

$('.control_right').on('click', function () {
        resetInterval(); //reset it
....

演示

于 2013-09-28T15:46:18.923 回答