Выполнение функции при нажатии кнопки / Start slide onclick button

145

23 мая 2019, 09:40

Как сделать чтобы при нажатии кнопки функции запустилась?

var myIndex = 0; 
carousel(); 
 
function carousel() { 
  var i; 
  var x = document.getElementsByClassName("kynney"); 
  for (i = 0; i < x.length; i++) { 
    x[i].style.display = "none"; 
  } 
  myIndex++; 
  if (myIndex > x.length) { 
    myIndex = 1 
  } 
  x[myIndex - 1].style.display = "block"; 
  setTimeout(carousel, 300); // Change image every 0.3 sec 
}

.kynney { 
  display: none; 
}

<div class="kynneyblcok" style="max-width:100px"> 
  <img class="kynney" src="https://blognumbers.files.wordpress.com/2010/09/1.jpg" style="width:100%"> 
  <img class="kynney" src="https://blognumbers.files.wordpress.com/2010/09/2.jpg" style="width:100%"> 
  <img class="kynney" src="https://blognumbers.files.wordpress.com/2010/09/3.jpg" style="width:100%"> 
</div>

Например, так только по одной слайд перелистывает

var myIndex = 0; 
myFunction(); 
 
function myFunction() { 
  var i; 
  var x = document.getElementsByClassName("kynney"); 
  for (i = 0; i < x.length; i++) { 
    x[i].style.display = "none"; 
  } 
  myIndex++; 
  if (myIndex > x.length) { 
    myIndex = 1 
  } 
  x[myIndex - 1].style.display = "block"; 
  setTimeout(carousel, 300); // Change image every 0.3 sec 
}

.kynney { 
  display: none; 
}

<div class="kynneyblcok" style="max-width:100px"> 
  <img class="kynney" src="https://blognumbers.files.wordpress.com/2010/09/1.jpg" style="width:100%"> 
  <img class="kynney" src="https://blognumbers.files.wordpress.com/2010/09/2.jpg" style="width:100%"> 
  <img class="kynney" src="https://blognumbers.files.wordpress.com/2010/09/3.jpg" style="width:100%"> 
</div> 
<button onclick="myFunction()">Click me</button>

Answer 1

Я бы так реализовал, коротко и внятно... На мой взгляд

const img = document.querySelector('img'), 
  button = document.querySelector('button'); 
 
let foto = [ 
  'https://blognumbers.files.wordpress.com/2010/09/1.jpg', 
  'https://blognumbers.files.wordpress.com/2010/09/2.jpg', 
  'https://blognumbers.files.wordpress.com/2010/09/3.jpg' 
]; 
 
let i = 1; 
img.src = foto[0]; 
 
button.addEventListener('click', () => { 
  if (i >= foto.length) 
    i = 0; 
  img.src = foto[i]; 
  i++; 
})

<div class="kynneyblcok" style="max-width:100px"> 
  <img class="kynney" src="" style="width:100%"> 
</div> 
<button>Click me</button>

Answer 2

Я не стал менять вашу идею, а просто не много доработал.

Советовал бы вам другим способом решить эту задачу, ибо это не очень хороший вариант)

function start() { 
  let timerId; 
  let animationState = 0; 
  document.getElementById("stop").addEventListener("click", function() { 
    if (!animationState) return; 
    clearTimeout(timerId); 
    animationState = 0; 
    return; 
  }); 
  return function () { 
    if (animationState) return; 
    var x = document.getElementsByClassName("kynney"); 
    let i; 
    let myIndex = 0; 
 
    function bust() { 
      for (let i = 0; i < x.length; i++) { 
        x[i].style.display = "none"; 
      } 
      myIndex++; 
      if (myIndex > x.length) { 
        myIndex = 1 
      } 
      x[myIndex - 1].style.display = "block"; 
      timerId = setTimeout(bust, 300); 
    } 
    animationState = 1; 
    setTimeout(bust, 300); // Change image every 0.3 sec 
    return; 
  } 
} 
 
document.getElementById("start").addEventListener("click", start());

.kynney { 
  display: none; 
} 
 
.active { 
  display: block; 
}

<div class="kynneyblcok" style="max-width:100px"> 
  <img class="kynney active" src="https://blognumbers.files.wordpress.com/2010/09/1.jpg" style="width:100%"> 
  <img class="kynney" src="https://blognumbers.files.wordpress.com/2010/09/2.jpg" style="width:100%"> 
  <img class="kynney" src="https://blognumbers.files.wordpress.com/2010/09/3.jpg" style="width:100%"> 
</div> 
<button id="start">Click me</button> 
<button id="stop">Stop</button>