Как сделать свой слайдер на чистом js?
Хочу сделать свой слайдер и передо мной стоит вроде бы несложная задача, но я уже всю голову сломал, помогите знающие люди!
Итак задача: Есть блок div с position:relative и в нем 4 изображения с position:absolute, таким образом изображения находятся в одном месте друг под другом, у всех изображений кроме одного display:none. Я хочу меняя свойство display у изображений с none на block циклически показывать по одному изображению через равные промежутки времени, как это сделать? с циклами и setInterval и setTimeout у меня что-то ничего дельного не вышло :( |
sashka7onoff,
где код? и поиск по форуму используйте |
Вот код:
<style>
#slider{
position: relative;
}
.slide{
position: absolute;
display: none;
}
</style>
<div id="slider">
<img src="slide1.jpg" class="slide" style="display: block">
<img src="slide2.jpg" class="slide">
<img src="slide3.jpg" class="slide">
<img src="slide4.jpg" class="slide">
</div>
Задача через равные промежутки времени менять свойство display у изображений так, чтобы в слайдере менялись картинки безо всякий эффектов, и чтобы после показа последнего слайда все циклически повторялось |
Цитата:
|
sashka7onoff,
:-?
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
#slider{
position: relative;
}
.slide{
position: absolute;
display: none;
}
.active{
display: block;
}
</style>
<script>
window.onload = function ()
{
var imgs = document.querySelectorAll('.slide'), len = imgs.length, i = len-1;
(function go()
{
imgs[i].classList.remove('active')
i = ++i % len;
imgs[i].classList.add('active');
window.setTimeout(go, 1000)
})()
}
</script>
</head>
<body>
<div id="slider">
<img src="http://javascript.ru/forum/images/smilies/smile.gif" class="slide">
<img src="http://javascript.ru/forum/images/smilies/cray.gif" class="slide">
<img src="http://javascript.ru/forum/images/smilies/dance3.gif" class="slide">
<img src="http://javascript.ru/forum/images/smilies/write.gif" class="slide">
</div>
</body>
</html>
|
Вот слайдер сам собирал
http://javascript.ru/forum/dom-windo...ug-ne-tak.html Только нужно всего добавить к Body onload="rep" |
Цитата:
|
amigru,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Здравствуйте! Помогите понять, что делаю не так (по жизни знаю,но относительно кода-нет) На учебе дали задание сделать "простой" сладер в js и даже ссылку дали, https://gist.github.com/cythux/8146948
может где-то не так ставлю кавычки? бьюсь уже второй день, что не так
var counter = 0;
items = document.querySelectorAll('.diy-slideshow .show');
var prev=document.querySelector('.prev .diy-slideshow');
var next=document.querySelector('.next .diy-slideshow');
prev.onclick= function(){
items[counter].style.display='none';
counter= counter-1;
if (counter<0) {
counter=items.length -1;
} }
next.onclick=function () {
items[counter].style.display='none';
counter=counter+1;
if (counter>=items.length){
counter=1;}
<div class="diy-slideshow"> <figure class="show"> <img src="images/gallery/sea1.jpg" width="850" height="auto"><div class="description">Tortoise in the sea</div> </figure> <figure><img src="images/gallery/sea2.jpg" width="850" height="auto"><div class="description">Seashells</div> </figure> <figure><img src="images/gallery/beach.jpg" width="850" height="auto"><div class="description">Beatiful beach</div> </figure> <figure><img src="images/gallery/sunrise.jpg" width="850" height="auto"><div class="description">Wonderful sunrice</div> </figure> <figure><img src="images/gallery/bollard.jpg" width="850" height="auto"><div class="description">Quay</div> </figure> <figure><img src="images/gallery/lake.jpg" width="850" height="auto"><div class="description">Amazing sunrice on the lake</div> </figure></div> <span class="prev"> <<</span> <span class="next"> >></span> |
Цитата:
|
| Часовой пояс GMT +3, время: 16:27. |