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> <div> <img src = "image / 3.jpg" /> </ div> <div> <img src = " /> </ div> <div> <img src = "image / 6.jpg" /> </ div> </div> <div> << / div> <div>> </div> <div id = "tabs"> <div> 1 </div> <div> 2 </div> <div> 3 </div> <div> 4 </div> <div> 5 </div> <div> 6 </div> </div> </ body> </html>
Code CSS:
* {padding: 0px; marge: 0px;}. swapImg {position: absolue;}. btn {position: absolu; hauteur: 90px; largeur: 60px; fond: rgba (0,0,0,0,5); / * régler la couleur de fond sur le noir et la transparence est 50% * / Couleur: #ffffff; Text-Align: Center; Line-Height: 90px; Font-Size: 40px; top: 155px; / * Image Height 400 / 2-45 * / Cursor: Pointer; / * Affichage: Aucun; * /}. {position: absolu; en haut: 370px; margin-left: 350px;}. onglet {hauteur: 20px; largeur: 20px; arrière-plan: # 05e9e2; line-height: 20px; text-align: Center; font-size: 10px; float: gauche; couleur: #ffffff; margin-droite: 10px; border-radius: 100%; cursor: pointeur;}. Bg {arrière-plan: # 00ff21;}Code js:
/// <référence path = "_ références. $ (". swapImg"). Eq (0) .show (). Siles (). Hide (); showtime (); // lorsque la souris est placée sur l'indice pour afficher l'image, la souris s'éloigne et continue de carrousel $ (". Tab"). $ (this) .index (); show (); // comment s'arrêter après que la souris soit mise? ClearInterval (time); // après avoir cliqué, -1if (i == 0) {i = 6;} i -; show (); showtime ();}); $ (". btnright"). Cliquez sur (fonction () {// 1. -1;} i ++; show (); showtime ();});}); function show () {//$("#allswapimg").hover(function () // {// $ (". Btn"). Show (); //}, function () // {// $ (".). Fades dans, Fadeout (300) s'estompe, filtrant le temps 0,3S $ (". swapimg"). eq (i) .fadein (300) .siblings (). fadeout (); $ (". 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 rendrons égaux à la première image i = 0;} show ();}, 3000);}Ce qui précède est le code de l'implémentation du diagramme du carrousel basé sur JavaScript qui vous a été présenté. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!