Question

我有一个功能，当点击3个按钮中的一个时，在3个div之间切换（每个按钮链接到每个div）。但我还需要该功能，以4秒的延迟自动点击每个按钮。我希望实现类似滑块的功能，可以自动切换这3个div，但div也可以通过按钮切换。有可能吗？如果是这样，怎么办？我是一个完整的jQuery / javascript初学者，我不知道如何让它工作。代码见下文。

＆＃13;

$(document).ready(function() {
  $('#button_slide1').trigger('click');
  $('.btn a').on('click', function(e) {
    e.preventDefault();
    //figure out which slide to show
    var slideToShow = $(this).attr('rel');
    //hide current slide
    $('#header .slides.active').removeClass('active')
    $('#' + slideToShow).addClass('active');
    //show new slide
  });
});

＆＃13;

.slides:not(.active) {
  display: none;
}

.btn {
  float: left;
  margin: 5px;
}

.btn p {
  padding: 0;
  margin: 0;
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="header">
  <div class="slides active" id="slide1">
    <img src="http://placehold.it/400x150/?text=Slide1">
  </div>
  <div class="slides" id="slide2">
    <img src="http://placehold.it/400x150/?text=Slide2">
  </div>
  <div class="slides" id="slide3">
    <img src="http://placehold.it/400x150/?text=Slide3">
  </div>
  <div class="buttons-wrapper">
    <div class="btn">
      <a href="http://facebook.com" rel="slide1">
        <img src="http://placehold.it/70x25/" alt="typo-icon">
        <p class="paragraph button-red">S1</p>
      </a>
    </div>
    <div class="btn">
      <a href="http://facebook.com" rel="slide2">
        <img src="http://placehold.it/70x25/" alt="rwd-icon">
        <p class="paragraph button-blue">S2</p>
      </a>
    </div>
    <div class="btn">
      <a href="http://facebook.com" rel="slide3">
        <img src="http://placehold.it/70x25/" alt="ux-icon">
        <p class="paragraph button-green">S3</p>
      </a>
    </div>
  </div>
</section>

＆＃13;

Answer 1

您需要使用javascript：

设置间隔

var inx=0, // the button index that must be clicked
    totalButtons = $('.buttons-wrapper').find('div.btn').length; // total number of buttons
var myInterval = setInterval(clickButton, 4000); // name of the function that needs to be triggered, time interval in miliseconds


function clickButton() {
  if (inx >= totalButtons) // check for out of index
     inx = 0;
  $('.buttons-wrapper').find('.btn').eq(inx).find('a').first().trigger('click');
  inx=inx+1; // adding one unit to the index
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="header">
  <div class="slides active" id="slide1">
    <img src="http://placehold.it/400x150/?text=Slide1">
  </div>
  <div class="slides" id="slide2">
    <img src="http://placehold.it/400x150/?text=Slide2">
  </div>
  <div class="slides" id="slide3">
    <img src="http://placehold.it/400x150/?text=Slide3">
  </div>
  <div class="buttons-wrapper">
    <div class="btn">
      <a href="http://facebook.com" rel="slide1" onclick="console.log(this.getAttribute('rel'))">
        <img src="http://placehold.it/70x25/" alt="typo-icon">
        <p class="paragraph button-red">S1</p>
      </a>
    </div>
    <div class="btn">
      <a href="http://facebook.com" rel="slide2" onclick="console.log(this.getAttribute('rel'))">
        <img src="http://placehold.it/70x25/" alt="rwd-icon">
        <p class="paragraph button-blue">S2</p>
      </a>
    </div>
    <div class="btn">
      <a href="http://facebook.com" rel="slide3" onclick="console.log(this.getAttribute('rel'))">
        <img src="http://placehold.it/70x25/" alt="ux-icon">
        <p class="paragraph button-green">S3</p>
      </a>
    </div>
  </div>
</section>

Answer 2

这样可以帮助你顺利完成任务。

<style>
    .toggleDiv {
        display: none;
    }
    .toggleDiv.active {
        display: block;
    }
</style>

<div id="div1" class="toggleDiv">
    <span>I'm div #1</span>
</div>

<div id="div2" class="toggleDiv">
    <span>I'm div #2</span>
</div>

<div id="div3" class="toggleDiv">
    <span>I'm div #3</span>
</div>

<button type="button" onClick="slides.toggle(0)">Toggle 1</button>
<button type="button" onClick="slides.toggle(1)">Toggle 2</button>
<button type="button" onClick="slides.toggle(2)">Toggle 3</button>

<script>
var slides = [
    document.getElementById("div1"),
    document.getElementById("div2"),
    document.getElementById("div3")
];

function Slides(slides, active) {
    this.slides = slides;
    this.activeIndex = active === 0 ? 0 : active === null ? null : active || null;
    this.slidesCount = this.slides.length;
    this.toggle = function(index) {
        if (this.activeIndex === index) {
            return this.close(index);
        }

        return this.open(index);
    };
    this.open = function(index) {
        this.activeIndex = index;
        let i;
        for (i = 0; i < this.slidesCount; i++) {
            if (this.activeIndex !== i) {
                this.slides[i].classList.remove("active");
            }
        }
        return this.slides[index].classList.add("active");
    };
    this.close = function(index) {
        this.activeIndex = null;
        return this.slides[index].classList.remove("active");
    };
console.log(this.activeIndex)
    if (this.activeIndex !== null) {
        this.slides[this.activeIndex].classList.add("active");
    }
}

var slides = new Slides(slides, 0);
</script>

Answer 3

https://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/ 您可以根据需要编辑此示例

$(document).ready(function() {
$("#slideshow > div:gt(0)").hide();
$('.btn').one("click", function(e) {
  e.preventDefault();
  setInterval(function() {
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
}, 3000);
  });
});

.btn {
  float: left;
  margin: 5px;
}

.btn p {
  padding: 0;
  margin: 0;
  text-align: center;
}
#slideshow > div {
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="header">
<div id="slideshow">
  <div class="slides active" id="slide1">
    <img src="http://placehold.it/400x150/?text=Slide1">
  </div>
  <div class="slides" id="slide2">
    <img src="http://placehold.it/400x150/?text=Slide2">
  </div>
  <div class="slides" id="slide3">
    <img src="http://placehold.it/400x150/?text=Slide3">
  </div>
</div>
  <div class="buttons-wrapper">
    <div class="btn">
      <a href="http://facebook.com" >
        <img src="http://placehold.it/70x25/" alt="typo-icon">
        <p class="paragraph button-red">S1</p>
      </a>
    </div>
    <div class="btn">
      <a href="http://facebook.com">
        <img src="http://placehold.it/70x25/" alt="rwd-icon">
        <p class="paragraph button-blue">S2</p>
      </a>
    </div>
    <div class="btn">
      <a href="http://facebook.com">
        <img src="http://placehold.it/70x25/" alt="ux-icon">
        <p class="paragraph button-green">S3</p>
      </a>
    </div>
  </div>
</section>

模拟按钮点击延迟

3 个答案: