1. Principe de mise en œuvre
(1) Placez toutes les images dans un conteneur parent div et définissez l'apparence et la cachette des images via l'attribut d'affichage;
(2) Le diagramme du carrousel est divisé en carrousel manuel et carrousel automatique;
L'objectif du carrousel manuel est de cliquer sur le petit cercle sous l'image chaque fois que vous cliquez dessus, d'obtenir son numéro d'index et de laisser l'image avec le numéro d'index correspondant être affiché, et le petit cercle à ce moment est mis en surbrillance;
Carrousel automatique: utilisez la minuterie setInterval () pour jouer l'image à chaque fois.
(3) Toutes les connaissances de base: opération DOM, temporisateur, application d'événement.
2. Disposition de la page de l'image du carrousel:
<div id = "Content"> <! - Total Parent Container -> <div> <! - Conteneur contenant des images -> <div> <img src = "./ img / lunbo1.jpg"> </ div> <div> <img src = "./ img / lunbo2.jpg"> </v> <v> <imgg src = "./ img / lunbo3.jpg"> </ div> <! - Indication cercle sous l'image -> <ul> <li id = 'pic1'> ● </li> <li id = 'pic2'> ● </li> </ul> <! - Faites défiler les flèches gauche et droite de l'image à l'arrière href = "#"> <span>> </span> </a> </div>
3. Style CSS du diagramme du carrousel:
#Content {largeur: 100%; hauteur: 500px; position: relative;}. Carousel-inner {position: relatif; largeur: 100%; débordement: caché; hauteur: 500px; } .carel-inner> .item> img {display: block; hauteur de ligne: 1; Z-index: 1;}. Carousel-Indicators {Position: Absolute; Bottom: 10px; gauche: 45%; z-index: 2; list-style-type: Aucun;}. Carousel-Indicators Li {affichage: block en ligne; padding: 0 15px; Font-Size: 24px; couleur: # 999; Cursor: pointeur; z-index: 2;}. active1 {Font-Size: 28px; couleur: #fff;}. Carousel-Control {Position: Absolute; Text-Decoration: Aucun; Color: # 999; Font-Watt: Bold; Opacity: .5; font-taille: 40px; z-index: 3;}. Carousel-Control: Hover {Color: FFF; Text-Decoration: Aucune; Opacité: .9; Terrain: Aucun; Font-Size: 42px;}. Prev {top: 30%; Gauche: 20px; } .Next {top: 30%; à droite: 20px;}4. Code d'implémentation JS pour le diagramme du carrousel:
window.onLoad = function () {// Initialisation du carrousel var lunbo = document.getElementById ('Content'); var imgs = lunbo.getElementsByTagName ('img'); var uls = lunbo.getElementsByTagName ('ul'); var lis = lunbo.getElementsByTagName ('li'); // Dans l'état initial, un cercle est en mode de surbrillance lis [0] .Style.fontsize = '26px'; lis [0] .style.color = '#fff' Carrousel var pic_index = 1; // Carrousel automatique. Utilisez pic_time pour enregistrer la lecture, vous pouvez utiliser ClearInterval () pour l'effacer à tout moment. var pic_time = setInterval (autobofang, 3000); // Carousel manuel pour (var i = 0; i <lis.length; i ++) {lis [i] .addeventListener ("MouseOver", change, false);} fonction change (event) {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'image d'index sélectionnée être afficher, et le cercle correspondant est mis en surbrillance IMGS [i] .style.display = 'block'; lis [i] .style.fontsize = '26px'; lis [i] .style.color = '#fff'; } // Fonction de traitement des événements AutoPlay autobofang () {if (pic_index> = lis.length) {pic_index = 0;} change1 (pic_index); pic_index ++;} // événements dans la conversion de la fonction d'image de lecture automatique change1 (index) {picChange (index); // Mouse Moving in the ul balise, joue automatique ULS [0] .AdDeventListener ("Mouseover", Pause, False); // Mouse déplace la balise UL, joue automatiquement l'image continue ULS [0] .AddeventListener ("Mouseout", Go, False);} // Auto joue la fonction Pause Pause (Event) {var Event = Event || Window.Event; Target = event.target || event.srcelement; switch (cible.id) {case "pic1": clearInterval (pic_time); Break; case "PIC2": ClearInterval (pic_time); Break; case "PIC3": ClearInterval (pic_time); Break;}} // Play Play Picture Fonction Continuing Go (Event) {var Event = Event || Window.Event; var Target = Event.target || Event.Srcelement; switch (cible.id) {case "pic1": pic_index = 1; pic_time = setInterval (autobofang, 3000); casse; cas "pic2": pic_index = 2; pic_time = setInterval (autobofang, 3000); casse; cas "pic3": pic_index = 3; pic_time = setInterval (Autobofang, 3000); Break;}}}5. Picture de reproduction:
6. Problèmes et lacunes rencontrées
Problème: Lorsque la souris se déplace dans la balise UL pour la première fois, l'image automatique du carrousel s'arrête, la souris se déplace et le carrousel automatique continue, mais au fur et à mesure que l'opération fonctionne, l'image du carrousel change de plus en plus rapidement, et en cliquant sur la balise UL à ce moment ne fonctionne plus.
Cause du problème: lorsque la minuterie est à nouveau utilisée après l'arrêt du carrousel, la valeur n'est pas attribuée à PIC_TIME pour l'enregistrement, de sorte que la souris n'est pas déplacée à nouveau sur la balise UL pour effacer la minuterie. Par conséquent, cliquer à nouveau sur la balise UL ne peut pas mettre en pause la lecture automatique du carrousel, et la vitesse devient de plus en plus rapide.
INAFEQUATION: L'effet du défilement sans réel comme le graphique du carrousel Taobao n'a pas été atteint, et l'effet indicateur des flèches gauche et droite n'a pas été achevé. Ceux-ci continueront d'être appris au stade ultérieur, s'améliorer et partager.