本文实例为大家分享了轮播的具体代码,自动轮播,居中显示,供大家参考,具体内容如下
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名注册、网站空间、营销软件、网站建设、八宿网站维护、网站推广。<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #div1{ width: 192px; height: 120px; border: 1px solid gray; margin: 0 auto; position: relative; overflow: hidden; } #div1 img{ position: absolute; } </style> </head> <body> <div id="div1"> <img src="images/1.jpg" width="192"/> <img src="images/2.jpg" width="192"/> <img src="images/3.jpg" width="192"/> <img src="images/4.jpg" width="192"/> </div> <div id="div2"> </div> <script> //获取页面元素 var div1 = document.getElementById('div1'); var div2 = document.getElementById('div2'); var imgs = div1.getElementsByTagName('img'); //初始化页面图片的位置 window.onload=function(){ for(var i=0; i<imgs.length; i++){ imgs[i].style.left = i*192 +'px' } }; //轮播移动的函数 function imgMove(){ var b1 = false; for(var i = 0; i < imgs.length; i++) { imgs[i].style.left = imgs[i].offsetLeft-1 + 'px'; if(imgs[i].offsetLeft==0){ b1=true; if(i==0) imgs[imgs.length-1].style='576px'; else imgs[i-1].style.left='576px' } } if(!b1) setTimeout(imgMove,20); else setTimeout(imgMove,2000); } setTimeout(imgMove,3000); </script> </body> </html>
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网站名称:js实现自动图片轮播代码-创新互联
文章出自:https://www.cdcxhl.com/article18/cssggp.html
成都网站建设公司_创新互联,为您提供App设计、网页设计公司、网站内链、网站策划、网站设计、ChatGPT
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联