Автоматический слайдер JS?

1

Я работаю над тем, чтобы js-слайдер был как автоматизирован, так и имеет элементы управления стрелками, у меня есть элементы управления стрелками, но я не могу сделать так, чтобы он тоже автоматизировался.

Вот код;

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}
</style>


<div class="w3-content w3-display-container" style="max-width:100%">
  <img class="mySlides" src="http://www.rugby-heaven.co.uk/media/wysiwyg/Free_Printing_Lions_Front.jpg" style="width:100%">
  <img class="mySlides" src="http://www.rugby-heaven.co.uk/media/wysiwyg/All_Blacks_Training.jpg" style="width:100%">
  <img class="mySlides" src="http://www.rugby-heaven.co.uk/media/wysiwyg/TourJersey_1.jpg" style="width:100%">
  <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
    <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">&#10094;</div>
    <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">&#10095;</div>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
  </div>
</div>

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" w3-white", "");
  }
  x[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " w3-white";
}
</script>

Может кто-нибудь, пожалуйста, светит, чтобы заставить его работать автоматически?

Теги:

2 ответа

0
Лучший ответ

Вы можете запустить его автоматически, вызвав функцию setInterval.

Метод setInterval() вызывает функцию или оценивает выражение через определенные интервалы (в миллисекундах).

Метод setInterval() будет продолжать вызов функции до вызова clearInterval(), или окно закрывается.

Я создал здесь функцию, чтобы вы могли создать идею, как это сделать. Вы можете прочитать больше здесь для setInterval()

Я не запускал этот код, поэтому дайте мне знать, есть ли у него какие-либо ошибки.

function makeInfinite(time){
    setInterval(function(){
       plusDivs(1);
    },time*1000);
}

makeInfinite(3);
Поделиться
0

setInterval() - это то, что вы ищете. Вероятно, вы также захотите попытаться добавить промежуток времени, когда кто-то нажимает на другой слайд, так как было бы плохой пользовательский интерфейс, чтобы щелкнуть "slide3", чтобы он оставил полсекунды позже из-за автоматизации,

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}
</style>


<div class="w3-content w3-display-container" style="max-width:100%">
  <img class="mySlides" src="http://www.rugby-heaven.co.uk/media/wysiwyg/Free_Printing_Lions_Front.jpg" style="width:100%">
  <img class="mySlides" src="http://www.rugby-heaven.co.uk/media/wysiwyg/All_Blacks_Training.jpg" style="width:100%">
  <img class="mySlides" src="http://www.rugby-heaven.co.uk/media/wysiwyg/TourJersey_1.jpg" style="width:100%">
  <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
    <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">&#10094;</div>
    <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">&#10095;</div>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
  </div>
</div>

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" w3-white", "");
  }
  x[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " w3-white";
}

setInterval(function(){showDivs(++slideIndex);},3000);
</script>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню