JSFiddle - React, Tailwind, and code Playground

by Alen Doe

HTML

<div id="next" class="next_img">
<img id="img_0" class="img_1.1">
</div>
<input id="elem" type="button" value="Нажми меня" />
<input id="elem_1" type="button" value="Нажми меня_1" />

CSS

.next_img {
  width: 800px;
  height: 600px;
  background: black;
}
.img_1.1 {
	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
	-o-transition: opacity 1s;
	transition: opacity 1s;
  }

JavaScript

var index = 0;
var img = document.getElementById('img_0')
var list = ['http://allday1.com/imagedb/9c/7/74918e8b6f429f52be83d020f35d6.jpg','http://china-gsm.ru/forum/uploads/monthly_11_2012/ccs-57388-0-96069400-1353668597.jpg','http://photosflowery.ru/photo/4c/4c0d9641676b7dc5b51e1cd1a9f14cd7.jpg'];

setInterval(function nextSlide() {
	list[index];
	index = (index+1)%list.length;
  img.src = list[index];
}, 4000)

img.src = list[index];
elem.onclick = function () {
	if (index+1==list.length) {
  index=-1;
  };
  index++;
	img.src = list[index];
}