автоматическая прокрутка слайдера с задержкой в 3 сек
Ребят привет! помогите пожалуйста! никак не получается сделать автоматическую прокрутку слайдера c задержкой 3 сек, только ручной:
HTML: <div id="carousel"> <figure id="spinner"> <img src="images/pic1.jpg" title="" alt=""> <img src="images/pic2.jpg" title="" alt=""> <img src="images/pic3.jpg" title="" alt=""> <img src="images/pic4.jpg" title="" alt=""> <img src="images/pic5.jpg" title="" alt=""> <img src="images/parkkk.jpg" title="" alt=""> </figure> </div> <span style=float:left class=ss-icon onclick="galleryspin('-')"><</span> <span style=float:right class=ss-icon onclick="galleryspin('')">></span> __________________________________________________ _______________________ CSS: div#carousel { margin-top: 0.8%; perspective: 1200px; background: linear-gradient(#037DAB,#022836); padding-top: 3%; font-size:0; margin-bottom: 3rem; overflow: hidden; } figure#spinner { transform-style: preserve-3d; height: 250px; transform-origin: 50% 50% -700px; transition: 1s; } figure#spinner img { width: 60%; max-width: 1000px; position: absolute; left: 20%; transform-origin: 50% 50% -700px; outline:1px solid transparent; } figure#spinner img:nth-child(1) { transform:rotateY(0deg); } figure#spinner img:nth-child(2) { transform: rotateY(-60deg); } figure#spinner img:nth-child(3) { transform: rotateY(-120deg); } figure#spinner img:nth-child(4) { transform: rotateY(-180deg); } figure#spinner img:nth-child(5){ transform: rotateY(-240deg); } figure#spinner img:nth-child(6){ transform: rotateY(-300deg); } div#carousel ~ span { color: #fff; margin: 5%; display: inline-block; text-decoration: none; font-size: 2rem; transition: 0.6s color; position: relative; margin-top: -6rem; border-bottom: none; line-height: 0; } div#carousel ~ span:hover { color: #888; cursor: pointer; } __________________________________________________ __________________ JS: var angle = 0; function galleryspin(sign) { spinner = document.querySelector("#spinner"); if (!sign) { angle = angle + 45; } else { angle = angle - 45; } spinner.setAttribute("style","-webkit-transform: rotateY("+ angle +"deg); -moz-transform: rotateY("+ angle +"deg); transform: rotateY("+ angle +"deg);"); setInterval(nextImage, 3000); } Заранее Спасибо большое!! |
Часовой пояс GMT +3, время: 10:01. |