Меняем картинки поочередно
Всем привет ! Подскажити пожалуйсто может кто уже решал подобное. Задача вот в чем, должен быть масив картинок к примерку 10 шт. две картинки одна слева другая-справа и оди дожны по очереди меняться сначало левая потом правая через 0.5с, и так без остановки Ну и кнопка пауза чтоб остановить/продолжить
|
Цитата:
|
ну мы видим какбы только две картинки они на весь екран widt: 50% displey:inline-block. остальные нужно показывать fade in/fade out
|
Научите, и в чем тебе подсказать? Что уже сделал сам?
|
<html>
<head>
<style>
img{
margin: 0;
width: 50%;
}
</style>
</head>
<body>
<img src="" alt=""><img src="" alt="">
<script>
var arr = ['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg'];
var arr2 = ['6.jpg','7.jpg','8.jpg','9.jpg','10.jpg'];
var img = document.querySelectorAll('img'), i = 0;
setInterval(()=>{
img[0].src = arr[i];
setTimeout(()=>img[1].src = arr2[i],500);
i++;
if (i==5) i=0;
},1000);
</script>
</body>
</html>
|
Спасибо
|
| Часовой пояс GMT +3, время: 15:32. |