轮播图实现全代码.doc

  1. 1、本文档共6页,可阅读全部内容。
  2. 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
  3. 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  4. 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
HTML5轮播图全代码 这篇文章主要介绍了HTML5轮播图全代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 轮播图原理大概是这样的,假定三张图片需要做轮播效果,首先需要将这三张图片并列放置,然后将这个整体并列向左移动,每当一张图片完整的从显示框走出,则将这张图片放置到最后面,循环往复就可以实现图片向左(或一个方向)移动。然后,需要有两个定时器,一个定时器A控制三张图片整体左移速度,另一个定时器B控制每当一张完整的图片走进这个显示框就等待一到两秒得到更好的用户体验。 我这里用三个div框当作轮播图来演示。 在html的body中添加一个div作为显示框,然后在这个div内部添加三个子div作为图片显示。代码如下: 1 2 3 4 5 <div id="box"> ????<div id="red" class="slide"></div> ????<div id="green" class="slide"></div> ????<div id="blue" class="slide"></div> </div> 头部添加css样式: 此时网页中应该是有一个黑色显示框div,内部有红、绿、蓝三个div框,三个框从上到下排列。 第一步,需要将三张图片都并列显示。 要实现将div挪动,且div比较方便控制每时每刻的位置(移动),只能使用相对定位,且为方便,三个子div位置移动应该是相对box,所以box应该作为相对的参照点。分别为box和slide代码添加position属性: 1 2 3 4 5 6 7 8 9 10 11 #box{ ????width:100px; ????height:100px; ????border:1px solid black; ????position:relative; } .slide{ ????width:100px; ????height:100px; ????position:absolute; } 为整个页面添加onload加载完成事件,当浏览器打开并加载完并自动执行事件中的代码块。这部分js代码写在刚才css下面即可,保持同级结构。 1 2 3 4 5 6 7 8 <script type="text/javascript"> onload=function(){ ????var arr = document.getElementsByClassName("slide"); ????for(var i=0;i<arr.length;i++){ ????????arr[i].style.left = i*100+"px"; ????} } </script> 当页面加载完全,三个div应该并列在一起。 接下来,需要实现将这三个div整体向左移动,使用定时器,即前面的定时器A。*onload同级下面添加如下代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 function LeftMove(){ ????????var arr = document.getElementsByClassName("slide");//获取三个子div ????????for(var i=0;i<arr.length;i++){ ????????????var left = parseFloat(arr[i].style.left); ????????????left-=2; ????????????var width = 100;//图片的宽度 ????????????if(left<=-width){ ????????????????left=(arr.length-1)*width;//当图片完全走出显示框,拼接到末尾 ????????????} ????????????arr[i].style.left = left+"px"; ????????} ????????} ????moveId=setInterval(LeftMove,10);//设置一个10毫秒定时器,并给自己取名 **此时,三个div已经能够缓慢向左移动。现在需要再开启一个定时器B,并将A定时器装入到B定时器中,A的定时器时间间隔应该长于一个div完全走进显示框的时间,我这里设置为3秒。然后,将A定时器装入到方法divInterval中,B定时器调用这个方法。且为了用户体验效果更好,当一个div完全走入显示框后,应该等待一段时间,再开是移动。所以在LeftMove方法中,*if判断中还需关闭moveId这个定时器*,停止此时移动的div定时器。当3秒不到的时间后,定时器B又会开启一个新的定时器A

文档评论(0)

k12教育文档 + 关注
实名认证
服务提供商

本人专注于k12教育,英语四级考试培训,本人是大学本科计算机专业毕业生,专注软件工程计算机专业,也可承接计算机专业的C语言程序设计,Java开发,Python程序开发。

1亿VIP精品文档

相关文档