HTML5轮播图全代码

2024-11-2 22:29| 发布者: ae2942d9| 查看: 94| 评论: 0

摘要: 轮播图原理大概是这样的，假定三张图片必要做轮播效果，首先必要将这三张图片并列放置，然后将这个整体并列向左移动，每当一张图片完整的从体现框走出，则将这张图片放置到最后面，循环往复就可以实现图片向左（或一

轮播图原理大概是这样的，假定三张图片必要做轮播效果，首先必要将这三张图片并列放置，然后将这个整体并列向左移动，每当一张图片完整的从体现框走出，则将这张图片放置到最后面，循环往复就可以实现图片向左（或一个方向）移动。然后，必要有两个定时器，一个定时器A控制三张图片整体左移速率，另一个定时器B控制每当一张完整的图片走进这个体现框就等待一到两秒得到更好的用户体验。
我这里用三个div框当作轮播图来演示。
在html的body中添加一个div作为体现框，然后在这个div内部添加三个子div作为图片体现。代码如下：

[code] <div id="box"> <div id="red" class="slide"></div> <div id="green" class="slide"></div> <div id="blue" class="slide"></div> </div>[/code]

头部添加css样式：

此时网页中应该是有一个玄色体现框div，内部有红、绿、蓝三个div框,三个框从上到下排列。
第一步，必要将三张图片都并列体现。
要实现将div挪动，且div比力方便控制时时刻刻的位置(移动)，只能利用相对定位，且为方便，三个子div位置移动应该是相对box，所以box应该作为相对的参照点。分别为box和slide代码添加position属性：

[code] #box{ width:100px; height:100px; border:1px solid black; position:relative; } .slide{ width:100px; height:100px; position:absolute; }[/code]

为整个页面添加onload加载完成事件，当浏览器打开并加载完并主动执行事件中的代码块。这部分js代码写在刚才css下面即可，保持同级布局。

[code] <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>[/code]

当页面加载完全，三个div应该并列在一起。
接下来，必要实现将这三个div整体向左移动，利用定时器，即前面的定时器A。*onload同级下面添加如下代码：

[code] 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。** if处添加一句代码为： if(left<=-width){ left=(arr.length-1)*width;//当图片完全走出体现框，拼接到末尾 clearInterval(moveId); } function divInterval(){ moveId=setInterval(LeftMove,10);//设置一个10毫秒定时器 } timeId=setInterval(divInterval,3000);//设置一个3秒的定时器。[/code]

到这里，轮播图基本已经实现了。然后，还必要在css样式中为box添加overflow,将超出体现框的div隐藏。

[code] #box{ width:100px; height:100px; border:1px solid black; position:relative; overflow:hidden;}[/code]

然后为了解决当鼠标悬停在轮播图，轮播图停止轮播效果，必要在box上添加鼠标移入和移出事件。开始标签：

[code] <div id="box" onmouseover="stop()" onmouseout="start()">[/code]

添加js代码：

[code] function stop(){ clearInterval(timeId);//鼠标停留关闭B定时器 } function start(){ clearInterval(timeId);//重新打开一个定时前，先关闭之前定时器。 timeId=setInterval(divInterval,2000);//重启一个定时器 }[/code]

当浏览器窗口切出或页面切换到其他页面一段时间再回来时，轮播效果会有短暂加速（随切出时间加长而加长）。主要是因为固然窗口切出去了，定时器依然在执行，但页面却没有将效果体现，所以切回来后会将之前的效果体现出来而加速轮播图。所以添加页面核心事件：

[code] //页面失去核心定时器停止 onblur = function(){ stop(); } //页面获取核心时重启定时器 onfocus = function(){ start(); }[/code]

全部代码如下：

[code] <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> <style type="text/css"> #box{ width:100px; height:100px; border:1px solid black; position:relative; overflow:hidden; } #red{ background-color:red; width:100px; } #green{ background-color:green; width:100px; } #blue{ background-color:blue; width:100px; } .slide{ width:100px; height:100px; position:absolute; } </style> <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"; } } 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;//当图片完全走出体现框，拼接到末尾 clearInterval(moveId); } arr[i].style.left = left+"px"; } } function divInterval(){ moveId=setInterval(LeftMove,10);//设置一个10毫秒定时器 } timeId=setInterval(divInterval,2000);//设置一个3秒的定时器。 function stop(){ clearInterval(timeId); } function start(){ clearInterval(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>[/code]

到此这篇关于HTML5轮播图全代码的文章就先容到这了,更多相关HTML5轮播图内容请搜索脚本之家从前的文章或继承浏览下面的相关文章，希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/html5/772647.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

收藏分享邀请

上一篇：HTML+CSS+JS实现图片的瀑布流结构的示例代码下一篇：HTML5中 rem适配方案与 viewport 适配问题详解

账号		自动登录	找回密码
密码			立即注册

HTML5轮播图全代码

相关分类

站长推荐 /6