0
点赞
收藏
分享

微信扫一扫

HTML5轮播图

梦想家们 2022-02-25 阅读 70
htmlhtml5

html的body中添加一个div作为显示框,然后在这个div内部添加三个子div作为图片显示。代码如下:

12345头部添加css样式:此时网页中应该是有一个黑色显示框div,内部有红、绿、蓝三个div框,三个框从上到下排列。第一步,需要将三张图片都并列显示。要实现将div挪动,且div比较方便控制每时每刻的位置(移动),只能使用相对定位,且为方便,三个子div位置移动应该是相对box,所以box应该作为相对的参照点。分别为box和slide代码添加position属性:#box{ width:100px; height:100px; border:1px solid black; position:relative;}.slide{ width:100px; height:100px; position:absolute;}1234567891011为整个页面添加onload加载完成事件,当浏览器打开并加载完并自动执行事件中的代码块。这部分js代码写在刚才css下面即可,保持同级结构。 12345678当页面加载完全,三个div应该并列在一起。接下来,需要实现将这三个div整体向左移动,使用定时器,即前面的定时器A。*onload同级下面添加如下代码:function LeftMove(){ var arr = document.getElementsByClassName("slide");//获取三个子div for(var i=0;i
举报

相关推荐

0 条评论