javascript - PHP 循环的新闻/图像 slider ，(JS) 点击重置间隔和更好的唯一 ID 格式

Question

我目前正在通过 JS 在我的网站上设置新闻/图像 slider 。我通过具有唯一 ID 的 PHP 循环滚动幻灯片数据。一切都很顺利，我只是不知道如何在手动切换幻灯片时重置计时器/间隔。

此外，必须有一种更好/更简单的方法来编写我目前使用所有唯一 ID 设置的手动点击导航。我将循环切片为 5。

(我的代码一团糟)

$(document).ready(function(){
    $("#newsFeatured article:first").addClass("active");
    $("#newsFeatured li:first").addClass("active");
});

var toggleSlide = function(){
    $("#newsFeatured article.active").removeClass("active")
        .next().add("#newsFeatured article:first").last().addClass("active");

    $("#newsFeatured li.active").removeClass("active")
        .next().add("#newsFeatured li:first").last().addClass("active");
}
setInterval(toggleSlide, 8000);

$(document).ready(function(){
    $("#control1").on('click', function() {
        $("#slide1").addClass("active");
        $("#slide2, #slide3, #slide4, #slide5").removeClass("active");
        $("#control1").addClass("active");
        $("#control2, #control3, #control4, #control5").removeClass("active");
        clearInterval(toggleSlide);
    });
    $("#control2").on('click', function() {
        $("#slide2").addClass("active");
        $("#slide1, #slide3, #slide4, #slide5").removeClass("active");
        $("#control2").addClass("active");
        $("#control1, #control3, #control4, #control5").removeClass("active");
    });
    $("#control3").on('click', function() {
        $("#slide3").addClass("active");
        $("#slide1, #slide2, #slide4, #slide5").removeClass("active");
        $("#control3").addClass("active");
        $("#control1, #control2, #control4, #control5").removeClass("active");
    });
    $("#control4").on('click', function() {
        $("#slide4").addClass("active");
        $("#slide1, #slide2, #slide3, #slide5").removeClass("active");
        $("#control4").addClass("active");
        $("#control1, #control2, #control3, #control5").removeClass("active");
    });
    $("#control5").on('click', function() {
        $("#slide5").addClass("active");
        $("#slide1, #slide2, #slide3, #slide4").removeClass("active");
        $("#control5").addClass("active");
        $("#control1, #control2, #control3, #control4").removeClass("active");
    });
});

https://jsfiddle.net/aor1xmb5/

最后，我有兴趣让我的幻灯片与移动设备的触摸进行交互，如果有人能给我指出一个关于入门的好教程的方向。

谢谢!

Answer 1

Clearing intervals相当简单:

function myFn() {console.log('idle');}

var myTimer = setInterval(myFn, 4000);

// Then, later at some future time, 
// to restart a new 4 second interval starting at this exact moment in time
clearInterval(myTimer);
myTimer = setInterval(myFn, 4000);

请检查代码片段:

$(function() {
  
  $("#newsFeatured article:first").addClass("active");
  $("#newsFeatured li:first").addClass("active");

  var sliderInterval = setInterval(toggleSlide, 8000);

  $('.featuredControls').on('click', 'li', function() {

    var $this = $(this),
      id = $this.attr('id'),
      index = id.replace('control', '');

    slideTo(index);

    // Clear interval.
    clearInterval(sliderInterval);
    sliderInterval = setInterval(toggleSlide, 8000);
  });

  function slideTo(index) {

    var id = '#control' + index,
      $this = $(id);

    // Highlight active slide.
    $(".featuredSlide").removeClass("active");
    $("#slide" + index).addClass("active");

    // Highlight active control.
    $this.parent().find('li').removeClass("active");
    $this.addClass("active");
  }

  function toggleSlide() {

    // Get current slide.
    var id,
      index,
      $next = $(".featuredControls .active").next();

    // If last item, start over.
    if ($next.length === 0) {
      $next = $(".featuredControls li").first();
    }

    id = $next.attr('id'),
      index = id.replace('control', '');

    slideTo(index);
  };
});

/* NEWS FEATURED SLIDER */
 #newsFeatured {
    position: relative;
    height: 300px;
    transition: 0.1s all linear;
}
#newsFeatured:hover {
    box-shadow: -6px 0px 0px 0px #ffc60d;
}
.featuredControls {
    opacity: 0;
    position: absolute;
    list-style-type: none;
    right: 30px;
    margin: 0;
    padding: 20px;
    z-index: 1;
    transition: 0.2s all linear;
}
#newsFeatured:hover .featuredControls {
    opacity: 1;
    right: 0;
}
.featuredControls li {
    background: rgba(0, 0, 0, 0.7);
    display: inline-block;
    height: 20px;
    width: 15px;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
}
.featuredControls li.active {
    background: #ffc60d;
}
.featuredSlide {
    display: none;
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    left: 0;
    width: 100%;
    height: 300px;
    overflow: hidden;
}
#newsFeatured:hover .featuredSlide {
    box-shadow: -1px 0px 0px 0px #101415;
}
#newsFeatured article.active {
    display: block;
}
.featuredImage {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    transition: 0.3s all ease;
    animation: featuredImage ease 1;
    animation-duration: 1s;
}
@keyframes featuredImage {
    from {
        opacity: 0;
        background-position: 30% 50%;
    }
    to {
        opacity: 1;
        background-position: 50% 50%;
    }
}
.featuredContent {
    width: 100%;
    padding: 20px;
    background: rgba(0, 0, 0, 0.65);
    position: absolute;
    bottom: 0;
    transition: 0.5s all ease;
}
.featuredContent h2 {
    font-size: 16px;
    font-weight: normal;
    text-transform: uppercase;
    margin: 0;
    animation: featuredTitle ease 1;
    animation-duration: 1s;
}
@keyframes featuredTitle {
    from {
        padding-left: 75px;
        opacity: 0;
    }
    to {
        padding-left: 0;
        opacity: 1;
    }
}
.featuredContent h2 a {
    color: #ffc60d;
    margin: 0 0 5px 0;
    transition: 0.1s all linear;
}
#newsFeatured:hover .featuredContent h2 a {
    color: #eee;
}
.featuredContent section {
    color: #a7a397;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='newsFeatured' class='ipsClearfix'>
  <ul class='featuredControls'>
    <li id='control1'></li>
    <li id='control2'></li>
  </ul>
  <article id='slide1' class='featuredSlide'>
    <a href=''>
      <div class='featuredImage' style='background-image: url(http://i.imgur.com/udTA5il.jpg);'></div>
    </a>

    <div class='featuredContent'>
      <h2>
        				<a href="">First Slide Title</a>
        			</h2>

      <section class='ipsType_normal ipsType_richText ipsType_break'>First slide description.</section>
    </div>
  </article>
  <article id='slide2' class='featuredSlide'>
    <a href=''>
      <div class='featuredImage' style='background-image: url(http://i.imgur.com/SWy0AHZ.jpg);'></div>
    </a>

    <div class='featuredContent'>
      <h2>
        				<a href="">Second Slide Title</a>
        			</h2>

      <section class='ipsType_normal ipsType_richText ipsType_break'>Second slide description.</section>
    </div>
  </article>
</div>