模擬按鈕點擊延遲

Question

我有一個功能，當3個按鈕之一被點擊（每個按鈕鏈接到每個div）之間切換3個div。但我也需要該功能，以每4秒延遲一次自動點擊每個按鈕。我想實現像滑塊一樣自動在這3個div之間切換的東西，但divs也可以通過按鈕進行切換。有可能嗎？如果是這樣，該怎麼做？我是一個總的jQuery/JavaScript初學者，我不知道如何使它工作。 代碼如下。

$(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 
 
    }); 
 
});

.slides:not(.active) { 
 
    display: none; 
 
} 
 

 
.btn { 
 
    float: left; 
 
    margin: 5px; 
 
} 
 

 
.btn p { 
 
    padding: 0; 
 
    margin: 0; 
 
    text-align: center; 
 
}

<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>

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>