MediaWiki:Common.js: mudanças entre as edições
Ir para navegação
Ir para pesquisar
Sem resumo de edição |
Sem resumo de edição |
||
Linha 1: | Linha 1: | ||
/* Códigos JavaScript aqui colocados serão carregados por todos aqueles que acessarem alguma página deste wiki */ | /* Códigos JavaScript aqui colocados serão carregados por todos aqueles que acessarem alguma página deste wiki */ | ||
function slider(){ | |||
const slider = document.querySelectorAll('.slide'); | |||
//Set your timer here : | |||
const timer = 3000; | |||
slider[0].style.display = 'block'; | |||
bullets = sliderBulletsCreation(slider); | |||
sliderLoop(slider, timer, bullets); | |||
}; | |||
function | function sliderLoop(slider, timer, bullets){ | ||
var timeoutFunction = []; | |||
for (var i = 0; slide = slider[i] && (i < slider.length); i++) { | |||
timeoutFunction.push(setTimeout(sliderAnim.bind(null, slider, i, timer, bullets), i*timer)); | |||
}; | |||
} | bullets.forEach(function(bullet, index){ | ||
bullet.addEventListener("click", function(event){ | |||
console.log(index); | |||
timeoutFunction.forEach(function(element){ | |||
clearTimeout(element); | |||
}); | |||
var t=0; | |||
for (var i = index; slide = slider[i] && (i < slider.length); i++) { | |||
timeoutFunction.push(setTimeout(sliderAnim.bind(null, slider, i, timer, bullets), t*timer)); | |||
t++; | |||
}; | |||
}) | |||
}) | |||
}; | |||
function sliderAnim(slider, i, timer, bullets){ | |||
slider.forEach(function(slide){ | |||
slide.style.display = 'none'; | |||
}) | |||
bullets.forEach(function(bullet){ | |||
bullet.style.backgroundColor = "#e5e5e5"; | |||
}) | |||
slider[i].style.display = 'block'; | |||
bullets[i].style.backgroundColor = "#774898"; | |||
if (i == (slider.length - 1)){setTimeout(sliderLoop.bind(null,slider, timer, bullets), timer)}; | |||
}; | |||
function sliderBulletsCreation(slider){ | |||
const sliderContainer = document.querySelector('.slider'); | |||
const length = slider.length; | |||
const bullets = []; | |||
for (var i = 0; slide = slider[i] && (i < slider.length); i++) { | |||
var bullet = document.createElement("div"); | |||
bullet.classList.add('slider-bullet'); | |||
bullet.style.right = 20 + (i * 20) + 'px'; | |||
sliderContainer.appendChild(bullet); | |||
bullets.push(bullet); | |||
} | |||
return bullets; | |||
}; | |||
slider(); |
Edição das 22h36min de 24 de julho de 2023
/* Códigos JavaScript aqui colocados serão carregados por todos aqueles que acessarem alguma página deste wiki */ function slider(){ const slider = document.querySelectorAll('.slide'); //Set your timer here : const timer = 3000; slider[0].style.display = 'block'; bullets = sliderBulletsCreation(slider); sliderLoop(slider, timer, bullets); }; function sliderLoop(slider, timer, bullets){ var timeoutFunction = []; for (var i = 0; slide = slider[i] && (i < slider.length); i++) { timeoutFunction.push(setTimeout(sliderAnim.bind(null, slider, i, timer, bullets), i*timer)); }; bullets.forEach(function(bullet, index){ bullet.addEventListener("click", function(event){ console.log(index); timeoutFunction.forEach(function(element){ clearTimeout(element); }); var t=0; for (var i = index; slide = slider[i] && (i < slider.length); i++) { timeoutFunction.push(setTimeout(sliderAnim.bind(null, slider, i, timer, bullets), t*timer)); t++; }; }) }) }; function sliderAnim(slider, i, timer, bullets){ slider.forEach(function(slide){ slide.style.display = 'none'; }) bullets.forEach(function(bullet){ bullet.style.backgroundColor = "#e5e5e5"; }) slider[i].style.display = 'block'; bullets[i].style.backgroundColor = "#774898"; if (i == (slider.length - 1)){setTimeout(sliderLoop.bind(null,slider, timer, bullets), timer)}; }; function sliderBulletsCreation(slider){ const sliderContainer = document.querySelector('.slider'); const length = slider.length; const bullets = []; for (var i = 0; slide = slider[i] && (i < slider.length); i++) { var bullet = document.createElement("div"); bullet.classList.add('slider-bullet'); bullet.style.right = 20 + (i * 20) + 'px'; sliderContainer.appendChild(bullet); bullets.push(bullet); } return bullets; }; slider();