Sur la base de l'article précédent utilisant JS pour implémenter le code d'effet du carrousel d'image (i), l'événement de réponse des flèches gauche et droite est ajouté, et cliquer sur les flèches gauche et droite peut également faire le défilement de l'image:
Le code JS est le suivant:
window.onload = function () {// carrousel initialisation var lunbo = document.getElementById ('contenu'); var imgs = lunbo.getElementsByTagname ('ul'); var lis = lunbo.getElementsbytagname (li '); var nax document.getElementById ('Next'); var prev = document.getElementById ('Prev'); var item = 0; // Dans l'état initial, un cercle est dans le mode de surbrillance lis [0] .style.fontsize = '26px'; lis [0] .Style.color = 'BLOC Modifiez automatiquement l'ordre des images var pic_index = 1; // Carrousel automatique. Utilisez pic_time pour enregistrer la lecture, et vous pouvez utiliser ClearInterval () pour l'effacer à tout moment. var pic_time = setInterval (autobofang, 1000); // fonction d'événement AutoPlay Autobofang () {if (pic_index> = lis.length) {pic_index = 0;} picchange (pic_index); pic_index ++;} // manuel carousel pour (var i = 0; i <lis.Legth; lis [i] .adDeventListener ("MouseOver", modifier, false);} fonction de fonction (événement) {var event = event || window.event; var target = event.target || event.srcelement; var enfants = cible.parentNode.children; pour (var i = 0; i <enfants.length; i ++) {if (cible == enfants [i]) {picChange (i); }}} // Fonction de commutation d'image PicChange (i) {// Soit toutes les images qui ne sont pas affichées, et tous les cercles sont dans un style normal pour (var j = 0; j <imgs.length; j ++) {imgs [j] .style.display = 'non'; lis [j] .style.fontsize = '24px'; lis [j] .style.color = '# 999';} // Laissez l'affichage d'image d'index sélectionné, et le cercle correspondant est mis en surbrillance IMGS [i] .style.display = 'block'; lis [i] .style.fontsize = '26px'; lis [i] .style.color = '#fff'; } // Lorsque la souris se rapproche de la zone d'image, la lecture automatique arrête lunbo.addeventListener ("Mouseover", function () {ClearInterval (pic_time);}, false); // Lorsque la souris se déplace hors de la zone d'image, la lecture automatique continue Lunbo.addeventListener ("MouseOut", fonction () {pic_time = pic_time = pic_time = setInterval (autobofang, 1000);}, false); // l'événement de clic de flèche inversé, l'image changera en continu avec l'événement de clic next.addeventListener ("clique 2) {item = 0;} else {item + = 1;} picChange (item);} prev.addeventListener ("click", moveprev, false); function moveprev () {ite (item == 0) {item = 2;} else {item- = 1;} picChange (item);}}}Diagramme de reproduction: diagramme de reproduction de la souris passant la flèche
Lorsque la souris clique sur la flèche, l'image changera et le petit cercle ci-dessous affichera également l'effet de mise en évidence de l'image correspondante.
Résumer:
L'effet de carrousel de base a été atteint. Ce qui doit être fait plus tard, c'est de simplifier et d'encapsuler le code et d'améliorer l'efficacité opérationnelle.