Cet article partage le code spécifique d'utilisation de JS pour créer des effets de carrousel sur la page d'accueil des sites Web généraux pour votre référence. Le contenu spécifique est le suivant
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <ititle> Carousel d'image </title> <style> .warp {width: 600px; Hauteur: 750px; Position: relative; marge: 30px auto 0; débordement: caché; } #box {width: 600px; Hauteur: 750px; Position: absolue; En haut: 0px; gauche: 0px; débordement: caché; / * overflow-x: auto; * /} #box #con {width: 6000px; Hauteur: 750px; débordement: caché; } #con img {float: gauche; Largeur: 600px; Hauteur: 750px; } #btnl {position: absolue; gauche: 0px; En haut: 366px; Largeur: 36px; hauteur: 36px; Contexte: URL (images / btnl.png) 0 0 sans répétition; curseur: pointeur; } #btnr {position: absolue; Droite: 0px; En haut: 366px; Largeur: 36px; hauteur: 36px; Contexte: URL (images / btnr.png) 0 0 sans répétition; curseur: pointeur; } #num {position: absolue; En bas: 10px; Gauche: 148px; débordement: caché; Style de liste: aucun; } #num li {float: gauche; marge: 0 5px; taille de police: 16px; hauteur de ligne: 25px; hauteur: 25px; Largeur: 25px; Contexte: #ccc; Texte-aligne: Centre; curseur: pointeur; } #num li.select {fond-couleur: vert; Couleur: blanc; } </ style> </ head> <body> <div> <div id = "box"> <div id = "con"> <img src = "images / meinv1.jpg"> <img src = "images / meinv2.jpg"> <img src = "images / meinv3.jpg"> <img src = "images / meinv4 src = "images / meinv5.jpg"> <img src = "images / meinv6.jpg"> </ div> </ div> <div id = "btnl"> </ div> <div id = "btnr"> </ div> <ul id = "num"> <li> 1 </li> <li> 2 </li> <li> <li> 5 </li> <li> 6 </li> </div> <script> var box = document.getElementById ('box'); var con = document.getElementById ('con'); var imgs = con.getElementsByTagName ('img'); var btnl = document.getElementById ('btnl'); var btnr = document.getElementById ('btnr'); var num = document.getElementById ('num'); var num = document.getElementById ('num'); var num = document.getElementById ('num'); var btnr = document.getElementById ('num'); var num = document.getElementById ('num'); var num = document.getElementById ('num'); var lis = num.getElementsByTagName ('li'); var timer1 = null, tempor2 = null; var imgw = imgs [0] .ClientWidth; var x = 0; fonction imgscroll () {// switch d'image var start = box.scrollleft; var end = imgw * x; var change = fin de démarrage; 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.Length; i ++) {Lis [i]. } lis [x] .classname = 'select'; } fonction move () {// défaut de défiler vers la gauche toutes les 3 secondes ClearInterval (TIMER1); TIMER1 = setInterval (function () {x ++; if (x> = imgs.length) {x = 0;} imgscroll (); for (var i = 0; i <lis.length; i ++) {lis [i] .classname = 'non'; 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 (); se déplacer(); } btnl.onclick = function () {ClearInterval (TIMER1); x--; if (x <0) {x = imgs.length-1; } imgscroll (); se déplacer(); } pour (var i = 0; i <lis.length; i ++) {lis [i] .index = i; lis [i] .onclick = function () {x = this.index; imgscroll (); se déplacer(); }} </ script> </ body> </html>L'effet spécifique est basé sur l'effet du carrousel d'image de la page de navigation HAO123. Vous pouvez aller sur le site Web pour vous y référer.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.