Проблема с слайдером javascript

Имея ползунок с реализацией изображений из массива, не могу понять, почему изображения не хотят отображаться из массива, попытались сделать путь, но он не работал. Мне нужен этот код для отражения этого изображения каждый раз нажмите кнопку: fpoimg.com/100x100. Im пытается исправить это только с чистым javascript. Вот песочницаПроблема с слайдером javascript

var slider = { 
 
\t slides: ['100x100', '100x100', '100x100', '100x100'], 
 
    frame:0, 
 
    set:function(image){ 
 
    \t path = path || 'http://fpoimg.com/'; 
 
    \t document.getElementById('scr').style.backgroundImage ="url ("+path+ image+")"; 
 
    }, 
 
    init:function() { 
 
    this.set(this.slides[this.frame]); 
 
    }, 
 
    left:function() { 
 
    this.frame--; 
 
    if(frame < 0) this.frame = this.slides.length - 1; 
 
    this.set(this.slides[this.frame]); 
 
    }, 
 
    right:function() { 
 
    if(this.frame == this.slides.length) this.frame = 0; 
 
    this.set(this.slides[this.frame]); 
 
    } 
 
}; 
 

 
window.onload = function() { 
 
\t slider.init(); 
 
    setInterval(function() { 
 
    \t slider.right(); 
 
    },5000); 
 
};

.scr { 
 
\t margin:20px auto; 
 
\t width: 600px; 
 
\t height: 320px; 
 
\t margin-top:20px; 
 
\t background-color: white; 
 
\t background-size:cover; 
 
} 
 
button { 
 
\t position: absolute; 
 
\t top: 150px; 
 
\t width: 25px; 
 
\t height: 150px; 
 
\t font-size: 30px; 
 
\t text-align: center; 
 
    background:none; 
 
    border:none; 
 
} 
 
.left { 
 
\t left:25px; 
 
} 
 
.right { 
 
\t right:25px; 
 
}

<body> 
 
    <button class="left" onclick="slider.left();"><</button> 
 
    <div class="scr"></div> 
 
    <button class="right" onclick="slider.right();">></button> 
 
</body>

источник

2015-12-17 Vladyslav Naidonov

Не хватает респ комментировать, но, кажется, у вас есть "getElementById(), когда вы имели в виду 'getElementsByClassName()'

источник

2015-12-17 16:04:12

На Line 6 вашего Javascript, вы использовали getElementById('scr'). У вас нет элемента с идентификатором или scr, не нужно использовать getElementsByClassName('scr')

Ваш новый код:

var slider = { 
 
    slides: ['100x100', '100x100', '100x100', '100x100'], 
 
    frame: 0, 
 
    set: function(image) { 
 
    path = path || 'http://fpoimg.com/'; 
 
    document.getElementsByClassName('scr').style.backgroundImage = "url (" + path + image + ")"; 
 
    }, 
 
    init: function() { 
 
    this.set(this.slides[this.frame]); 
 
    }, 
 
    left: function() { 
 
    this.frame--; 
 
    if (frame < 0) this.frame = this.slides.length - 1; 
 
    this.set(this.slides[this.frame]); 
 
    }, 
 
    right: function() { 
 
    if (this.frame == this.slides.length) this.frame = 0; 
 
    this.set(this.slides[this.frame]); 
 
    } 
 
}; 
 

 
window.onload = function() { 
 
    slider.init(); 
 
    setInterval(function() { 
 
    slider.right(); 
 
    }, 5000); 
 
};

.scr { 
 
    margin: 20px auto; 
 
    width: 600px; 
 
    height: 320px; 
 
    margin-top: 20px; 
 
    background-color: white; 
 
    background-size: cover; 
 
} 
 
button { 
 
    position: absolute; 
 
    top: 150px; 
 
    width: 25px; 
 
    height: 150px; 
 
    font-size: 30px; 
 
    text-align: center; 
 
    background: none; 
 
    border: none; 
 
} 
 
.left { 
 
    left: 25px; 
 
} 
 
.right { 
 
    right: 25px; 
 
}

<body> 
 
    <button class="left" onclick="slider.left();"> 
 
    </button> 
 
    <div class="scr"></div> 
 
    <button class="right" onclick="slider.right();"></button> 
 
</body>

источник

2015-12-17 16:07:59 Druzion

Да, у правой, но он не показывает ничего. Я хочу, чтобы этот код отражал это изображение каждый раз, когда нажимал кнопку: http://fpoimg.com/100x100 –

Проблема с слайдером javascript

ответ

Смежные вопросы