HTML5轮播图,HTML轮播图代码

　　旋转木马的原理大概是这样的。假设三张图片需要轮播，首先你需要将这三张图片并排放置，然后将整张图片并排向左移动。每当一张图片完全从显示框中出来时，可以将这张图片放在后面，通过来回移动可以将图片向左(或一个方向)移动。那么，需要有两个定时器。一个定时器A控制三张图片的整体左移速度，另一个定时器B控制每一张完整图片走进这个显示框等待一到两秒，以获得更好的用户体验。

　　我使用三个div框作为转盘来演示。在html的主体中添加一个div作为显示框，然后在这个div中添加三个子div以显示为图片。代码如下：

　　Div id= box div id= red class= slide /div div id= green class= slide /div div id= blue class= slide /div/将css样式添加到div标题：

　　此时网页中应该有一个黑色的显示框div，有红绿蓝三个div框，从上到下排列。

　　第一步是并排显示所有三张图片。

　　要移动div，并且便于div随时控制位置(移动)，只能使用相对定位。为了方便起见，三个子div的位置移动应该是相对于box的，所以box应该被用作相对参考点。将位置属性分别添加到框和幻灯片代码中：

　　# box { width:100px；高度：100px边框：1px纯黑；位置：相对；}.幻灯片{宽度：100px高度：100px位置：绝对；}为整个页面添加onload加载完成事件，在浏览器打开加载时自动执行事件中的代码块。这部分js代码可以写在刚才的css下，保持相同的层级结构。

　　script type= text/JavaScript onload=function(){ var arr=document . getelementsbyclassname( slide )；for(var I=0；iarr .长度；I){ arr[I]. style . left=I * 100 px ；}}/script当页面完全加载时，三个div应该并置。

　　接下来，我们需要将三个div向左移动，使用计时器，也就是前面的计时器A. *onload在同一级别下添加以下代码：

　　函数left move(){ var arr=document . getelementsbyclassname( slide )；//获取三个子div for(var I=0；iarr .长度；I){ var left=parse float(arr[I]. style . left)；左-=2；var宽度=100；//图片的宽度if(left=-width){ left=(arr . length-1)* width；//当图片完全脱离显示框时，拼接到end } arr[I]. style . left=left px ；}}moveId=setInterval(LeftMove，10)；//设置一个10ms的定时器，给自己起个名字* *此时，三个div已经可以慢慢向左移动了。现在你需要启动另一个定时器B，将定时器A加载到定时器B中，A的定时器间隔要比一个div完全走进显示框的时间长。我在这里设置为3秒。然后，一个定时器被加载到方法divInterval中，b定时器调用这个方法。并且为了更好的用户体验，当一个div完全走进显示框时，应该等待一段时间，然后再打开移动。因此，在LeftMove方法中，应该在*if判断中关闭定时器moveId *，并停止此时移动的div定时器。不到3秒钟后，计时器B将启动新的计时器A.* *在if中添加一个代码：if(left=-width){ left=(arr . length-1)* width；//当图片完全脱离显示框时，拼接到clearInterval(moveId)的末尾；}函数divInterval(){ moveId=setInterval(left move，10)；//设置一个10ms的定时器} time id=setinterval(divinterval，3000)；//设置一个3秒的定时器。到目前为止，基本实现了轮播。然后，您需要在css样式的框中添加溢出，以隐藏显示框之外的div。

　　# box { width:100px；高度：100px边框：1px纯黑；位置：相对；溢出：隐藏；}然后，为了解决鼠标悬停在轮播上方时轮播停止轮播效果的问题，需要在盒子上添加鼠标移入和移出事件。开始标签:

　　div= box onmouseover= stop() onmouseout= start()添加js代码：

　　函数stop(){ clear interval(timeId)；//鼠标停留关闭B定时器}函数start(){ clear interval(timeId)；//重新打开一个定时前，先关闭之前定时器100 .timeId=setInterval(divInterval，2000)；//重启一个定时器}当浏览器窗口切出或页面切换到其他页面一段时间再回来时，轮播效果会有短暂加速（随切出时间加长而加长)。主要是因为虽然窗口切出去了，定时器依然在执行，但页面却没有将效果显示，所以切回来后会将之前的效果显示出来而加速轮播图。所以添加页面焦点事件：

　　//页面失去焦点定时器停止onblur=function(){ stop()；}//页面获取焦点时重启定时器onfocus=function(){ start()；}全部代码如下：

　　！DOCTYPE htmlhtmlheadmeta charset= UTF-8 标题轮播图/title style type= text/CSS # box { width:100px；高度：100像素边框：1px纯黑；位置：相对；溢出：隐藏；} #红色{背景色：红色；宽度：100像素} #绿色{背景色：绿色；宽度：100像素} #蓝色{背景色：蓝色；宽度：100px}。幻灯片{宽度：100像素高度：100像素位置：绝对；}/style脚本type= text/JavaScript onload=function(){ var arr=document。getelementsbyclassname( slide )；for(var I=0；iarr。长度；I){ arr[I]。风格。left=I * 100 px} }函数left move(){ var arr=文档。getelementsbyclassname( slide )；//获取三个子div for(var I=0；iarr。长度；I){ var left=parse float(arr[I].风格。左)；左-=2;定义变量宽度=100;//图片的宽度if(left=-width){ left=(arr。长度-1)*宽度；//当图片完全走出显示框，拼接到末尾清除间隔(moveId)；} arr[I]。风格。left=左‘px’；} }函数divInterval(){ moveId=setInterval(左移，10)；//设置一个10毫秒定时器} timeId=setInterval(divInterval，2000)；//设置一个3秒的定时器函数stop(){ clear interval(timeId)；}函数start(){ clear interval(timeId)；timeId=setInterval(divInterval，2000)；}//页面失去焦点停止onblur=function(){ stop()；}//页面获取焦点时开始onfocus=function(){ start()；}/script/head body div id= box onmouseover= stop() onmouseout= start() div id= red class= slide /div div id= green class= slide /div div id= blue class= slide /div/div/body/html到此这篇关于HTML5轮播图全代码的文章就介绍到这了，更多相关HTML5轮播图内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。