Когда я посмотрел на этот вопрос, мне нужно было что-то простое.О том, как это сделать, уже есть несколько рамочных ответов, но иногда это проще и гибче, просто чтобы создать свой собственный.Конечно, вы получаете определенную сумму бесплатно с фреймворком (и это часто правильный выбор, если он подходит), но тогда вам придется беспокоиться о совместимости фреймворка, поддержке и копании в недрах фреймворка.за его пределами.
Вот простой слайдер только для JavaScript.По сути, это img для слайдера, img для кнопки и обратный вызов с процентом прогресса.Не полностью поющий и танцующий слайдер, а нечто простое для построения.
Демонстрация
HTML
<div id='bb_sliderContainer' ondragstart="return false;" ondrop="return false;">
<img id='bb_slider' src='slider.png'/>
<img id='bb_sliderButton' src='sliderbutton.png'/>
</div>
Сценарий
Поместить в файл JavaScript:
(function(bb,undefined){
bb.Slider = function(buttonCssId,sliderCssId,initialPercentage,progressUpdate)
{
var halfButtonWidth = 5;
var sliderMoving = false;
var buttonElement = document.getElementById(buttonCssId);
var sliderElement = document.getElementById(sliderCssId);
var length = sliderElement.clientWidth;
var leftPos = 0;
var rightPos = leftPos + length;
length = rightPos - leftPos;
if( initialPercentage )
{
var buttonPos = leftPos + initialPercentage / 100 * length;
buttonElement.style.left = buttonPos - halfButtonWidth + 'px';
}
buttonElement.addEventListener( 'mousedown', function(){
sliderMoving = true;
} );
document.addEventListener( 'mousemove', function(event){
if( sliderMoving == true )
{
var rect = sliderElement.getBoundingClientRect();
var mouseX = event.clientX - rect.left;
var prop = mouseX / length;
if( prop < 0 )
{
prop = 0;
mouseX = 0;
}
if( prop > 1 )
{
prop = 1;
mouseX = length;
}
buttonElement.style.left = leftPos + prop * length - halfButtonWidth + 'px';
progressUpdate(prop * 100);
}
});
document.addEventListener( 'mouseup', function(){
sliderMoving = false;
});
}
}(window.bb = window.bb || {}));
Пример использования
HTML:
<img src='space.png' style='width:50%;position:relative;top:20px' id='bb_sliderSubject'>
Javascript:
function sliderUpdate(percentage)
{
var sliderSubject = document.getElementById('bb_sliderSubject');
sliderSubject.style.width = percentage + '%';
}
window.onload=function()
{
var slider = new bb.Slider('bb_sliderButton','bb_slider',50,sliderUpdate);
}