HTML5轮播图全代码
轮播图原理⼤概是这样的，假定三张图⽚需要做轮播效果，⾸先需要将这三张图⽚并列放置，然后将这个整体并列向左移动，每当⼀张图⽚完整的从显⽰框⾛出，则将这张图⽚放置到最后⾯，循环往复
就可以实现图⽚向左（或⼀个⽅向）移动。然后，需要有两个定时器，⼀个定时器A控制三张图⽚整体左移速度，另⼀个定时器B控制每当⼀张完整的图⽚⾛进这个显⽰框就等待⼀到两秒得到更好的⽤户
体验。
我这⾥⽤三个div框当作轮播图来演⽰。
在html的body中添加⼀个div作为显⽰框，然后在这个div内部添加三个⼦div作为图⽚显⽰。代码如下：
<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属
性：
#box{
width:100px;
height:100px;
html个人网页完整代码图片
border:1px solid black;
position:relative;
}
.slide{
width:100px;
height:100px;
position:absolute;
}
为整个页⾯添加onload加载完成事件，当浏览器打开并加载完并⾃动执⾏事件中的代码块。这部分js代码写在刚才css下⾯即可，保持同级结构。
<script type="text/javascript">
onload=function(){
var arr = ElementsByClassName("slide");
for(var i=0;i<arr.length;i++){
arr[i].style.left = i*100+"px";
}
}
</script>
当页⾯加载完全，三个div应该并列在⼀起。
接下来，需要实现将这三个div整体向左移动，使⽤定时器，即前⾯的定时器A。*onload同级下⾯添加如下代码：
function LeftMove(){
var arr = ElementsByClassName("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定时器调⽤这个⽅法。且为了⽤ if处添加⼀句代码为：
if(left<=-width){
left=(arr.length-1)*width;//当图⽚完全⾛出显⽰框，拼接到末尾
clearInterval(moveId);
}
function divInterval(){
moveId=setInterval(LeftMove,10);//设置⼀个10毫秒定时器
}
timeId=setInterval(divInterval,3000);//设置⼀个3秒的定时器。
到这⾥，轮播图基本已经实现了。然后，还需要在css样式中为box添加overflow，将超出显⽰框的div隐藏。
#box{
width:100px;php混淆研究
height:100px;
border:1px solid black;
position:relative;
overflow:hidden;}
然后为了解决当⿏标悬停在轮播图，轮播图停⽌轮播效果，需要在box上添加⿏标移⼊和移出事件。开始标签：
<div id="box" onmouseover="stop()" onmouseout="start()">
添加js代码：
function stop(){
clearInterval(timeId);//⿏标停留关闭B定时器mysql的数据怎么备份最快
}
一键生成动画视频function start(){
clearInterval(timeId);//重新打开⼀个定时前，先关闭之前定时器。
timeId=setInterval(divInterval,2000);//重启⼀个定时器
}
当浏览器窗⼝切出或页⾯切换到其他页⾯⼀段时间再回来时，轮播效果会有短暂加速（随切出时间加长⽽加长）。主要是因为虽然窗⼝切出去了，定时器依然在执⾏，但页⾯却没有将效果显⽰，所以切
回来后会将之前的效果显⽰出来⽽加速轮播图。所以添加页⾯焦点事件：
//页⾯失去焦点定时器停⽌
onblur = function(){
stop();
}
//页⾯获取焦点时重启定时器
onfocus = function(){
start();
}
全部代码如下：
<!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{51单片机c语言教程视频教程
background-color:blue;
width:100px;
}
.slide{
width:100px;
height:100px;
position:absolute;
}
</style>
<script type="text/javascript">
onload=function(){
var arr = ElementsByClassName("slide");
for(var i=0;i<arr.length;i++){
arr[i].style.left = i*100+"px";
}
}
function LeftMove(){
var arr = ElementsByClassName("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>
到此这篇关于HTML5轮播图全代码的⽂章就介绍到这了，更多相关HTML5轮播图内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。