1. Points clés:
1. Lorsque la page est chargée, les images se chevauchent et se cassent ensemble [positionnement absolu];
2. La première image montre, d'autres sont cachées;
3. Définissez l'indice et définissez la couleur de l'indice afin qu'il se déplace avec l'image;
4. Déplacez la souris vers l'image, affichez les icônes en mouvement gauche et droite, éloignez la souris et continuez vers le carrousel;
2. Code d'implémentation:
Code html:
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <éad> <meta http-equiv = "contenu-type" contenu = "text / html; charquet = utf-8" /> <title> Carousel Chart </ title> href = "css / lunbimg.css" rel = "Stylesheet" /> <script src = "js / jQuery-1.10.2.min.js"> </ script> <script src = "js / lunbimg.js"> </cript> src = "image / 1.jpg" /> </ div> <div> <img src = "image / 2.jpg" /> </ div> <v> <img src = "image / 3.jpg" /> </ div> <v> <img src = " <div> <img src = "image / 6.jpg" /> </ div> </ div> <div> << / div> <div>> </ div> <div id = "tabs"> <div> 1 </ div> <v> 2 </div> <v> 3 </ div> </ div> </html> <v> 6 </ div> </ div> </ html> <v> 6 </ving
Code CSS:
* {rembourrage: 0px; marge: 0px;}. swapImg {position: absolue; } .btn {position: absolue; hauteur: 90px; Largeur: 60px; Contexte: RGBA (0,0,0,0,5); / * définir la couleur d'arrière-plan sur le noir et la transparence est de 50% * / couleur: #FFFFFF; Texte-aligne: Centre; hauteur de ligne: 90px; taille de police: 40px; En haut: 155px; / * Hauteur de l'image 400 / 2-45 * / Cursor: pointeur; /*display:none ;*/ }.btnright {Left: 840px; / * Width d'image 900-Navigation Width 60 * /} # ombrages {position: Absolute; En haut: 370px; marge-gauche: 350px;}. Tab {hauteur: 20px; Largeur: 20px; Contexte: # 05E9E2; hauteur de ligne: 20px; Texte-aligne: Centre; taille de police: 10px; flottant: à gauche; Couleur: #ffffff; marge-droite: 10px; Border-Radius: 100%; curseur: pointeur;}. bg {fond: # 00FF21;}Code js:
/// <référence path = "_ références. $ (". SwapImg"). Eq (0) .Show (). Silets (). Hide (); Pour s'arrêter après que la souris soit mise en place? (i == 0) {i = 6;} i--; function show () {//$("#allswapimg").hover(function () // {// $ (". btn"). show (); //}, function () // {// $ (". btn"). hide (); //}); // Fadein (300) s'estompe, Fadeout (300) s'estompe, le temps de filtrage 0,3S $ (". swapimg"). eq (i) .fadein (300) .siblings (). fadeout (); $ (". Tab"). Eq (i) .AddClass ("bg"). Silets (). RemoveClass ("bg");} fonction showtime () {time = setInterval (function () {i ++; if (i == 6) {// il n'y a que 6 images, donc je ne peux pas dépasser 6. Si je suis égal à 6, nous le ferons égal à la première image i = 0; show ();}, 3000);}L'exemple ci-dessus de simplement réaliser l'effet des images de carrousel est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.