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;border:1px solid black;position:relative;
}
.slide{width:100px;height:100px;position:absolute;
}

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

  <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同级下面添加如下代码：

function LeftMove(){var arr = document.getElementsByClassName("slide");//获取三个子divfor(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秒的定时器。

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

     #box{
width:100px;
height:100px;
border:1px solid black;
position:relative;
overflow:hidden;

}

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

<div id="box" onmouseover="stop()" onmouseout="start()">

添加js代码：

function stop(){clearInterval(timeId);//鼠标停留关闭B定时器
}
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{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");//获取三个子divfor(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轮播图全代码相关推荐

php实现轮播图代码,微信小程序实例：轮播图的代码实现与分析
本篇文章给大家带来的内容是关于微信小程序实例:轮播图的代码实现与分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 本文来说说轮播图,最常见的一个轮播图,中间带小圆点,自动轮播. S ...
HTML轮播图完整代码 (原生Javascript）
HTML轮播图完整代码 (原生Javascript) <!DOCTYPE html> <html><head><meta charset="utf- ...
php 走马灯轮播,Vue.js轮播图走马灯代码实例（全）
这个是html, 数据中我用了一个数组来放图片的目录, data() { return { superurl: [ { url: '', img: '../../../../static/image/ ...
JS原生实现简单的轮播图(完整代码,一看就懂)
实现完后的效果图: 实现思路: 先实现能左右箭头点击能实现图片的更换,也就是五张图片先隐藏然后看一下当前要现在第几张就让它显示,其他四张隐藏. 需要注意的地方是当前图片是第一张或第五张的时候我们要加判 ...
原生js+css 实现轮播图完整代码
利用原生的js实现轮播图,可以添加到自己的UI库中,在以后的项目中对其进行修改然后添加到已有项目中. 先写出css部分和html部分,直接上代码 <!DOCTYPE html> <h ...
html 无缝轮播图完整代码
1,实现轮播效果 2,实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
抖音轮播图html代码,抖音上超火的“图片轮播”、“卡点”视频都是怎么做的？...
原标题:抖音上超火的"图片轮播"."卡点"视频都是怎么做的? 话不多说,直接进入正题. 首先,图片轮播类的视频该怎么做? 抖音视频剪辑江苏麒麟互娱步骤一:选 ...
纯css自动全屏轮播图html代码,纯CSS3代码实现简单的图片轮播
以4张图片为例: 1.基本布局: 将4张图片左浮动横向并排放入一个div容器内,图片设置统一尺寸,div宽度设置4个图片的总尺寸,然后放入相框容器div, 相框设置1个图片的大小并设置溢出隐藏,以保证 ...
HTML轮播图全宽,jq全兼容自适应宽度图片轮播（新手适用）
插件描述:简单的jq逻辑,方便引用,易看懂,兼容性好更新时间:2019-12-10 00:45:09 全屏自适应轮播$(function() { var num = 0; $('.ui-contro ...
layui下的图片轮播图效果代码收藏
以下展示在layui table表格列表中展示图片集,并使用layui图片轮播效果. <script> layui.use(['table', 'tree', 'layer','jquer ...

HTML5轮播图全代码

HTML5轮播图全代码相关推荐

最新文章

热门文章