Tout le monde connaît le site Web HAO123. Je n'ai pas besoin d'en dire plus sur les effets spécifiques. Les amis intéressés peuvent se référer aux rendus. L'éditeur suivant partagera avec vous l'idée d'implémenter le code. Bien sûr, vous pouvez ajouter, modifier et supprimer le code en fonction de vos besoins.
Le code clé est le suivant:
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <itle> Carousel </ title> <style> .warp {width: 600px; height: 750px; position: relative; margin: 30px auto 0; superflow: Hidden;} # box {width: 600px; 750px; position: absolu; en haut: 0px; gauche: 0px; overflow: Hidden; / * overflow-x: auto; * /} # box #con {width: 6000px; hauteur: 750px; overflow: Hidden;} # con img {float: gauche; largeur: 600px; hauteur: 750px; 0px; top: 366px; largeur: 36px; hauteur: 36px; arrière-plan: URL (images / btnl.png) 0 0 non-répétition; curseur: pointeur;} # btnr {position: absolu; droit: 0px; top: 366px; width: 36px; hauteur: 36px; arrière-plan: url (images / btnr. sans répétition; curseur: pointeur;} # num {position: absolu; en bas: 10px; gauche: 148px; déborde pointer;} # num li.select {background-color: vert; couleur: blanc;} </ style> </ head> <vody> <div> <div id = "box"> <div id = "con"> <img src = "images / meinv1.jpg"> <img src = "images / meinv2.jpg"> <img src = "images / meinv.jpg" src = "images / meinv4.jpg"> <img src = "images / meinv5.jpg"> <img src = "images / meinv6.jpg"> </ div> <div id = "btnl"> </ div> <div id = "btnr"> </v> <ul id = "num"> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> <li> 6 </li> </ul> </div> <script> var box = document.getElementById ('box'); var con = document.getElementyd ('con'); var (' imgs = con.getElementsByTagName ('img'); var btnl = document.getElementById ('btnl'); var btnr = document.getElementById ('btnr'); var num = document.getElementById ('num'); var lis = num.getElementsByTagname ('li'); imgw = imgs [0] .ClientWidth; var x = 0; fonction imgscroll () {// commutateur d'image var start = box.scrollleft; var end = imgw * x; var change = end-start; var minstep = 0; var maxstep = 30; var; StepLength = Change / MaxStep; ClearInterval (TIMER2); TIMER2 = setInterval (function () {Minstep ++; // Console.log (Minstep); if (Minstep> = Maxstep) {ClearInterval (TIMER2);} start + = steplength; Box.Scrollleft = start;}, 20) pour (var i = 0; i <lis. i ++) {lis [i] .classname = 'non';} lis [x] .classname = 'select';} function move () {// par défaut de défilement vers la gauche toutes les 3 secondes clearInterval (TIMER1); TIMER1 = setInterval (function () {x ++; if (x> = iMg.Legth) {x = 0;} imgscrol = 0; i <lis.length; i ++) {lis [i] .classname = 'Aucun'; lis [x] .classname = 'select';}}, 3000);} move (); // Démarrer la fonction de défilement par défaut; btnr.onclick = function () {ClearInterval (TIMER1); x ++; if (x> = imgs.length) {x = 0;} imgscroll (); move ();} btnl.onclick = function () {clearInterval (timer1); x - if (x <0) {x = imgs.length-1;} imgscroll (); move ();} for (var i = 0; i <lis.length; i ++) {lis [i] .index = i; lis [i] .onclick = function () {x = this.index; imgscroll (); move ();}} </script>Ce qui précède est l'effet du carrousel d'image de la page de navigation HAO123 JS IMITATION HAO123 qui vous est présentée par l'éditeur. 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!