Cet article présente principalement JavaScript pour implémenter un simple effet carrousel d'image. Cliquez sur l'indice pour passer à l'image. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer
L'exemple de cet article est Tout le monde. a partagé le code spécifique pour implémenter un carrousel d'images simple en js, et a finalement réalisé le rendu
bloc de code
Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. J'espère également que tout le monde soutiendra Script Home.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> * { margin: 0; padding: 0 } ul { list-style: none } img { vertical-align: top } .box { width: 490px; height: 170px; margin: 100px auto; padding: 5px; border: 1px solid #ccc; } .inner { width: 490px; height: 170px; background-color: pink; overflow: hidden; position: relative; } .inner ul { width: 1000%; position: absolute; top: 0; left: 0; } .inner li { float: left; } .square { position: absolute; right: 10px; bottom: 10px; } .square span { display: inline-block; width: 16px; height: 16px; background-color: #fff; text-align: center; line-height: 16px; cursor: pointer; } .square span.current { background-color: orangered; color: #fff; } </style> </head> <body> <p class="box" id="box"> <p class="inner"> <ul> <li><a href="#"><img src="images/01.jpg" /></a></li> <li><a href="#"><img src="images/02.jpg" /></a></li> <li><a href="#"><img src="images/03.jpg" /></a></li> <li><a href="#"><img src="images/04.jpg" /></a></li> <li><a href="#"><img src="images/05.jpg" /></a></li> </ul> <p class="square"> <span class="current">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </p> </p> </p> <script type="text/javascript"> //鼠标经过按钮 按钮排他 var box = document.getElementById("box"); var inner = box.children[0]; //获取box下的第一个元素,也就是inner var ul = inner.children[0]; //获取inner下的ul var squareList = inner.children[1]; //获取inner下的第二个元素 var squares = squareList.children; //获取所有的按钮 var imgWidth = inner.offsetWidth; // alert(imgWidth); //给每个按钮注册鼠标经过事件 for(var i=0; i<squares.length; i++){ squares[i].index = i; //把索引保存在自定义属性中 squares[i].onmouseover = function(){ //鼠标经过事件 //排他 干掉所有人 for(var j=0; j<squares.length; j++){ squares[j].className = ""; } //留下我自己 this.className = "current"; //以动画的方式把ul移动到指定的位置 //目标 和当前按钮索引有关,和图片宽度有关 而且是负数 var target = -this.index * imgWidth; //获取到索引 animate(ul,target); } } function animate(obj, target) { clearInterval(obj.timer); obj.timer = setInterval(function () { var step = 20; var step = obj.offsetLeft < target ? step : -step; if (Math.abs(obj.offsetLeft - target) > Math.abs(step)) { obj.style.left = obj.offsetLeft + step + "px"; } else { obj.style.left = target + "px"; clearInterval(obj.timer); } }, 15) } </script> </body> </html>
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!