Javascript réalise un défilement transparent des compétences images_javascript

Effet : Lorsque la souris entre dans l'image, le défilement s'arrête, lorsque la souris sort, elle défile automatiquement

Peut ajuster le défilement vers la gauche ou la droite

Copier le code Le code est le suivant : * { marge : 0 ; remplissage : 0; } #div1 { débordement : masqué ; largeur : 712 px ; Hauteur : 108px ; marge : 100 px automatique ; position : relative ; fond : rouge ; } #div1 ul { position : absolue ; gauche : 0; haut : 0; } #div1 ul li { flotter : gauche ; largeur : 178 px ; Hauteur : 108px ; style de liste : aucun ; }

Copier le code Le code est le suivant : Aller à gauche Allez à droite & Lt; img src = "IMG/défilement transparent /1.jpg"/& gt;

Ce qui précède est une mise en page simple, et ce qui suit est le code Javascript principal

Copier le code

Le code est le suivant : window.onload = function() { var oDiv = document.getElementById("div1"); var oUl = oDiv.getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li'); vitesse variable = 2 ; oUl.innerHTML = oUl.innerHTML; oUl.style.width = aLi[0].offsetWidth * aLi.length 'px'; fonction déplacer() { if (oUl.offsetLeft oUl.style.left = '0'; > si (oUl.offsetLeft > 0) { oUl.style.left = -oUl.offsetWidth / 2 'px'; > oUl.style.left = oUl.offsetLeft vitesse 'px'; > var timer = setInterval(move, 30); oDiv.onmouseover = function() { clearInterval(minuterie); }; oDiv.onmouseout = function() { timer = setInterval(move, 30); }; document.getElementsByTagName('a')[0].onclick = function() { vitesse = -2; }; document.getElementsByTagName('a')[1].onclick = function() { vitesse = 2; }; > 简单讲下思路：

首先设置ul 里面的图片一共有8张 oUl.innerHTML = oUl.innerHTML;

在 计算ul的宽度为 li的实际宽度*8

之后将 多余的内容隐藏

注意 ： oUl.offsetLeft 肯定是负值

所以判断的时候不要把负号漏掉

复制代码 代码如下 : if (oUl.offsetLeft oUl.style.left = '0'; }

Ce paragraphe signifie que l'image a défilé à mi-chemin, retirez rapidement l'image, car le programme s'exécute trop vite, il est donc presque invisible pour obtenir un défilement fluide

Enfin, utilisez la vitesse variable pour contrôler le défilement dans les directions gauche et droite.

Le code ci-dessus n'implémente que les fonctions les plus basiques, et les amis peuvent continuer à s'améliorer sur cette base.