简易轮播图效果

来源：互联网发布：苏州大学大数据培训编辑：程序博客网时间：2024/06/07 09:30

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style.css"> <style> #bannel{overflow:hidden;} </style> </head> <body> <div id="bannel"> <img src="images/1.jpg"alt=""> <img src="images/2.jpg"alt=""> <img src="images/3.jpg"alt=""> <img src="images/4.jpg"alt=""> <img src="images/5.jpg"alt=""> </div> <script> // 获取所有的图片 var _imgs = document.getElementsByTagName("img"); // 声明两个表示图片的变量 var _index = 0; var _next = 1; // 开始执行切换效果 setInterval(function() { // 画图中的第一步 _imgs[_index].style.left = _imgs[_index].offsetLeft - _imgs[0].offsetWidth + "px"; // 画图中的第二部 _imgs[_next].style.left = _imgs[_next].offsetLeft - _imgs[0].offsetWidth + "px"; // 画图中的第三部 _imgs[_index].style.left = _imgs[0].offsetWidth + "px"; _index++; _next++; if(_index >= _imgs.length) { _index = 0; } if(_next >= _imgs.length) { _next = 0; } }, 1000); </script> </body> </html>

0 0