Modification du script slide dans portail.php
This commit is contained in:
parent
1f162f71e6
commit
0d178676ab
281
Vue/portail.php
281
Vue/portail.php
|
|
@ -527,108 +527,191 @@
|
|||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
// Empeche inspecter dans le navigateur
|
||||
|
||||
/*
|
||||
if (document.addEventListener) {
|
||||
document.addEventListener('contextmenu', function (e) {
|
||||
e.preventDefault();
|
||||
}, false);
|
||||
} else {
|
||||
document.attachEvent('oncontextmenu', function () {
|
||||
window.event.returnValue = false;
|
||||
});
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
// Accéder aux images
|
||||
let slideImages = document.querySelectorAll('.slide');
|
||||
// Accéder aux boutons suivant et précédent
|
||||
let next = document.querySelector('.next');
|
||||
let prev = document.querySelector('.prev');
|
||||
// Accéder aux indicateurs
|
||||
let dots = document.querySelectorAll('.dot');
|
||||
|
||||
var counter = 0;
|
||||
|
||||
// Code pour le bouton suivant
|
||||
next.addEventListener('click', slideNext);
|
||||
|
||||
function slideNext(){
|
||||
slideImages[counter].style.animation = 'next1 0.5s ease-in forwards';
|
||||
|
||||
if(counter >= slideImages.length-1){
|
||||
counter = 0;
|
||||
}
|
||||
else{
|
||||
counter++;
|
||||
}
|
||||
slideImages[counter].style.animation = 'next2 0.5s ease-in forwards';
|
||||
indicators();
|
||||
}
|
||||
|
||||
// Code pour le bouton précédent
|
||||
prev.addEventListener('click', slidePrev);
|
||||
function slidePrev(){
|
||||
slideImages[counter].style.animation = 'prev1 0.5s ease-in forwards';
|
||||
if(counter == 0){
|
||||
counter = slideImages.length-1;
|
||||
}
|
||||
else{
|
||||
counter--;
|
||||
}
|
||||
slideImages[counter].style.animation = 'prev2 0.5s ease-in forwards';
|
||||
indicators();
|
||||
}
|
||||
|
||||
// Defilement automatique
|
||||
function autoSliding(){
|
||||
deletInterval = setInterval(timer, 3000);
|
||||
function timer(){
|
||||
slideNext();
|
||||
indicators();
|
||||
}
|
||||
}
|
||||
autoSliding();
|
||||
|
||||
// Arrêtez le defilement automatique lorsque la souris survole une image
|
||||
const container = document.querySelector('.slide-container');
|
||||
container.addEventListener('mouseover', function(){
|
||||
clearInterval(deletInterval);
|
||||
});
|
||||
|
||||
// Reprendre le defilement lorsque la souris ne survole plus une image
|
||||
container.addEventListener('mouseout', autoSliding);
|
||||
|
||||
// Ajouter et supprimer une classe active des indicateurs
|
||||
function indicators(){
|
||||
for(i = 0; i < dots.length; i++){
|
||||
dots[i].className = dots[i].className.replace(' active', '');
|
||||
}
|
||||
dots[counter].className += ' active';
|
||||
}
|
||||
|
||||
// Ajouter un événement de clic à l'indicateur
|
||||
function switchImage(currentImage){
|
||||
currentImage.classList.add('active');
|
||||
var imageId = currentImage.getAttribute('attr');
|
||||
if(imageId > counter){
|
||||
slideImages[counter].style.animation = 'next1 0.5s ease-in forwards';
|
||||
counter = imageId;
|
||||
slideImages[counter].style.animation = 'next2 0.5s ease-in forwards';
|
||||
}
|
||||
else if(imageId == counter){
|
||||
// Slider Module - Protégé contre les exécutions multiples
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// Vérifier si déjà initialisé
|
||||
if (window.sliderInstance) {
|
||||
console.warn('Une instance de slider existe déjà');
|
||||
return;
|
||||
}
|
||||
else{
|
||||
slideImages[counter].style.animation = 'prev1 0.5s ease-in forwards';
|
||||
counter = imageId;
|
||||
slideImages[counter].style.animation = 'prev2 0.5s ease-in forwards';
|
||||
|
||||
// Empêche inspecter dans le navigateur
|
||||
/*
|
||||
if (document.addEventListener) {
|
||||
document.addEventListener('contextmenu', function (e) {
|
||||
e.preventDefault();
|
||||
}, false);
|
||||
} else {
|
||||
document.attachEvent('oncontextmenu', function () {
|
||||
window.event.returnValue = false;
|
||||
});
|
||||
}
|
||||
indicators();
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
// Déclaration des variables
|
||||
var slideImages, next, prev, dots, counter, deletInterval, container;
|
||||
|
||||
// Initialisation
|
||||
function initSlider() {
|
||||
slideImages = document.querySelectorAll('.slide-image');
|
||||
next = document.querySelector('.next');
|
||||
prev = document.querySelector('.prev');
|
||||
dots = document.querySelectorAll('.dot');
|
||||
container = document.querySelector('.slide-container');
|
||||
counter = 0;
|
||||
|
||||
// Vérifier les éléments requis
|
||||
if (!slideImages.length) {
|
||||
console.error('Éléments du slider non trouvés');
|
||||
return false;
|
||||
}
|
||||
|
||||
// Configurer les event listeners
|
||||
setupEventListeners();
|
||||
|
||||
// Démarrer le slider
|
||||
autoSliding();
|
||||
indicators();
|
||||
|
||||
// Stocker l'instance
|
||||
window.sliderInstance = {
|
||||
next: slideNext,
|
||||
prev: slidePrev,
|
||||
goTo: function(index) {
|
||||
if (index >= 0 && index < slideImages.length) {
|
||||
slideImages[counter].style.animation = '';
|
||||
counter = index;
|
||||
slideImages[counter].style.animation = '';
|
||||
indicators();
|
||||
}
|
||||
},
|
||||
destroy: destroySlider
|
||||
};
|
||||
|
||||
console.log('Slider initialisé avec ' + slideImages.length + ' images');
|
||||
return true;
|
||||
}
|
||||
|
||||
// Configurer les event listeners
|
||||
function setupEventListeners() {
|
||||
if (next) {
|
||||
next.addEventListener('click', slideNext);
|
||||
}
|
||||
|
||||
if (prev) {
|
||||
prev.addEventListener('click', slidePrev);
|
||||
}
|
||||
|
||||
if (container) {
|
||||
container.addEventListener('mouseover', function(){
|
||||
clearInterval(deletInterval);
|
||||
});
|
||||
|
||||
container.addEventListener('mouseout', autoSliding);
|
||||
}
|
||||
|
||||
// Event listeners pour les dots
|
||||
for (var i = 0; i < dots.length; i++) {
|
||||
dots[i].addEventListener('click', function() {
|
||||
var imageId = parseInt(this.getAttribute('attr') || this.getAttribute('data-index'));
|
||||
if (!isNaN(imageId)) {
|
||||
switchImage(imageId);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Fonctionnalités du slider
|
||||
function slideNext(){
|
||||
slideImages[counter].style.animation = 'next1 0.5s ease-in forwards';
|
||||
|
||||
if(counter >= slideImages.length-1){
|
||||
counter = 0;
|
||||
} else {
|
||||
counter++;
|
||||
}
|
||||
|
||||
slideImages[counter].style.animation = 'next2 0.5s ease-in forwards';
|
||||
indicators();
|
||||
}
|
||||
|
||||
function slidePrev(){
|
||||
slideImages[counter].style.animation = 'prev1 0.5s ease-in forwards';
|
||||
|
||||
if(counter == 0){
|
||||
counter = slideImages.length-1;
|
||||
} else {
|
||||
counter--;
|
||||
}
|
||||
|
||||
slideImages[counter].style.animation = 'prev2 0.5s ease-in forwards';
|
||||
indicators();
|
||||
}
|
||||
|
||||
function autoSliding(){
|
||||
clearInterval(deletInterval);
|
||||
deletInterval = setInterval(function() {
|
||||
slideNext();
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
function indicators(){
|
||||
for(var i = 0; i < dots.length; i++){
|
||||
dots[i].className = dots[i].className.replace(' active', '');
|
||||
}
|
||||
|
||||
if (dots[counter]) {
|
||||
dots[counter].className += ' active';
|
||||
}
|
||||
}
|
||||
|
||||
function switchImage(imageId){
|
||||
if(imageId > counter){
|
||||
slideImages[counter].style.animation = 'next1 0.5s ease-in forwards';
|
||||
counter = imageId;
|
||||
slideImages[counter].style.animation = 'next2 0.5s ease-in forwards';
|
||||
} else if(imageId == counter){
|
||||
return;
|
||||
} else {
|
||||
slideImages[counter].style.animation = 'prev1 0.5s ease-in forwards';
|
||||
counter = imageId;
|
||||
slideImages[counter].style.animation = 'prev2 0.5s ease-in forwards';
|
||||
}
|
||||
indicators();
|
||||
}
|
||||
|
||||
// Nettoyage
|
||||
function destroySlider() {
|
||||
clearInterval(deletInterval);
|
||||
|
||||
if (next) next.removeEventListener('click', slideNext);
|
||||
if (prev) prev.removeEventListener('click', slidePrev);
|
||||
if (container) {
|
||||
container.removeEventListener('mouseover', function(){});
|
||||
container.removeEventListener('mouseout', autoSliding);
|
||||
}
|
||||
|
||||
for (var i = 0; i < dots.length; i++) {
|
||||
dots[i].removeEventListener('click', function(){});
|
||||
}
|
||||
|
||||
window.sliderInstance = null;
|
||||
console.log('Slider détruit');
|
||||
}
|
||||
|
||||
// Initialiser quand le DOM est prêt
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initSlider);
|
||||
} else {
|
||||
initSlider();
|
||||
}
|
||||
|
||||
// Exposer publiquement si nécessaire
|
||||
window.initSlider = initSlider;
|
||||
window.destroySlider = destroySlider;
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user