Comment implémenter le carrousel en JavaScript : 1. Créez le fichier de code HTML de base ; 2. Initialisez la réinitialisation ; 3. Utilisez la méthode du code js "function animate(obj, json, fn) {...}" pour réaliser l’effet carrousel.
L'environnement d'exploitation de cet article : système Windows 7, version JavaScript 1.8.5, ordinateur DELL G3.
Comment JavaScript implémente-t-il un carrousel ?
Le code spécifique permettant à JavaScript d'implémenter une image de carrousel est pour votre référence. Le contenu spécifique est le suivant :
extrait de code HTML
Ajoutez l'image vous-même, ou. utilisez votre propre photo téléchargée, faites défiler vers le bas pour voir l'extrait de code
<div class="wrap" id="wrap"> <div class="slide" id="slide"> <ul> <li><a href="#" ><img src="images/slidepic1.jpg" alt=""/></a></li> <li><a href="#" ><img src="images/slidepic2.jpg" alt=""/></a></li> <li><a href="#" ><img src="images/slidepic3.jpg" alt=""/></a></li> <li><a href="#" ><img src="images/slidepic4.jpg" alt=""/></a></li> <li><a href="#" ><img src="images/slidepic5.jpg" alt=""/></a></li> </ul> <div class="arrow" id="arrow"> <a href="javascript:;" class="prev" id="arrLeft"></a> <a href="javascript:;" class="next" id="arrRight"></a> </div> </div> </div>
css :
Réinitialisation de l'initialisation
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul { margin: 0; padding: 0 } body, button, input, select, textarea { font: 12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif; color: #666; } ol, ul { list-style: none; } a { text-decoration: none; } fieldset, img { border: 0; vertical-align: top; } a, input, button, select, textarea { outline: none; } a, button { cursor: pointer; } .wrap { width: 1200px; margin: 100px auto; } .slide { height: 500px; position: relative; } .slide li { position: absolute; left: 200px; top: 0; } .slide li img { width: 100%; } .arrow { opacity: 0; position: absolute; top: 50%; z-index: 1000; width: 100%; } .prev, .next { width: 76px; height: 112px; position: absolute; z-index: 99; } .prev { left: 0; background: url(../images/prev.png) no-repeat; } .next { right: 0; background-image: url(../images/next.png); }
extrait de code js :
Il s'agit du code js encapsulé, vous pouvez le citer directement
function animate(obj, json, fn) { clearInterval(obj.timer); obj.timer = setInterval(function () { var flag = true; for (var k in json) { if (k === "opacity") { var leader = getStyle(obj, k) * 100; var target = json[k] * 100; var step = (target - leader) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); leader = leader + step; obj.style[k] = leader / 100; } else if (k === "zIndex") { obj.style.zIndex = json[k]; } else { var leader = parseInt(getStyle(obj, k)) || 0; var target = json[k]; var step = (target - leader) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); leader = leader + step; obj.style[k] = leader + "px"; } if (leader != target) { flag = false; } } if (flag) { clearInterval(obj.timer); if (fn) { fn(); } } }, 15); } function getStyle(obj, attr) { if (window.getComputedStyle) { return window.getComputedStyle(obj, null)[attr]; } else { return obj.currentStyle[attr]; } }
définissez la fonction onload, récupérez chaque objet, définissez l'événement de passage de la souris, la souris passant à travers l'image du carrousel affichera progressivement la flèche et disparaîtra lorsque la souris partira ; puis définira la position de l'image (attribuera une valeur à l'objet)
window.onload = function () { //alert("外部的JS"); //找人 var wrap = document.getElementById("wrap"); var arrow = document.getElementById("arrow"); var arrLeft = document.getElementById("arrLeft"); var arrRight = document.getElementById("arrRight"); var slide = document.getElementById("slide"); var ul = slide.children[0]; var lis = ul.children;//所有图片 //1.鼠标经过轮播图 让箭头渐渐地显示 鼠标离开渐渐消失 wrap.onmouseover = function () { animate(arrow, {"opacity": 1}); }; wrap.onmouseout = function () { animate(arrow, {"opacity": 0}); }; //2.设置图片位置 var config = [ { "width": 400, "top": 20, "left": 50, "opacity": 0.2, "zIndex": 2 },//0 { "width": 600, "top": 70, "left": 0, "opacity": 0.8, "zIndex": 3 },//1 { "width": 800, "top": 100, "left": 200, "opacity": 1, "zIndex": 4 },//2 { width: 600, top: 70, left: 600, opacity: 0.8, zIndex: 3 },//3 { "width": 400, "top": 20, "left": 750, "opacity": 0.2, "zIndex": 2 }//4 ];//其实就是一个配置单 规定了每张图片的大小位置层级透明度 //获取页面上所有的li 让他们从当前的位置 以动画的效果到指定的位置 function assign() { for (var i = 0; i < lis.length; i++) { animate(lis[i], config[i], function () { flag = true;//动画执行完成后重新打开阀门 }); } } assign(); //3.点击箭头旋转 //点击右箭头 arrRight.onclick = function () { if (flag) { flag = false;//关闭阀门 //把开始的元素放到最后 config.push(config.shift()); assign(); } }; //点击左箭头 arrLeft.onclick = function () { if (flag) { flag = false; //把最后的元素放到开始 config.unshift(config.pop()); assign(); } }; //4.添加节流阀 var flag = true;//表示阀门是打开的 };
Je viens de commencer à me lancer dans l'industrie du front-end, j'espère que vous pourrez m'aider. Si vous avez des commentaires, laissez-moi un message. Votre soutien est ma plus grande motivation
Étude recommandée : "Tutoriel sur les bases de JavaScript".
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!