HTML5轮播图全代码

轮播图原理大概是这样的，假定三张图片需要做轮播效果，首先需要将这三张图片并列放置，然后将这个整体并列向左移动，每当一张图片完整的从显示框走出，则将这张图片放置到最后面，循环往复就可以实现图片向左（或一个方向）移动。然后，需要有两个定时器，一个定时器A控制三张图片整体左移速度，另一个定时器B控制每当一张完整的图片走进这个显示框就等待一到两秒得到更好的用户体验。
我这里用三个div框当作轮播图来演示。
在html的body中添加一个div作为显示框，然后在这个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下面即可，保持同级结构。

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

function LeftMove(){
		var arr = document.getElementsByClassName("slide");//获取三个子div
		for(var i=0;i

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

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

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



添加js代码：

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

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

//页面失去焦点定时器停止
onblur = function(){
	stop();
}
//页面获取焦点时重启定时器
onfocus = function(){
	start();
}

全部代码如下：










	

		

		

		

	



到此这篇关于HTML5轮播图全代码的文章就介绍到这了,更多相关HTML5轮播图内容请搜索潘少俊衡以前的文章或继续浏览下面的相关文章，希望大家以后多多支持潘少俊衡！