最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
HTML5轮播图代码介绍
时间:2022-09-14 编辑:坚强 来源:一聚教程网
今天为大家带来了HTML5轮播图代码介绍,本文给大家介绍的非常详细,有需要的小伙伴一起来看看吧。
轮播图原理大概是这样的,假定三张图片需要做轮播效果,首先需要将这三张图片并列放置,然后将这个整体并列向左移动,每当一张图片完整的从显示框走出,则将这张图片放置到最后面,循环往复就可以实现图片向左(或一个方向)移动。然后,需要有两个定时器,一个定时器A控制三张图片整体左移速度,另一个定时器B控制每当一张完整的图片走进这个显示框就等待一到两秒得到更好的用户体验。
我这里用三个div框当作轮播图来演示。
在html的body中添加一个div作为显示框,然后在这个div内部添加三个子div作为图片显示。代码如下:
头部添加css样式:
此时网页中应该是有一个黑色显示框div,内部有红、绿、蓝三个div框,三个框从上到下排列。
第一步,需要将三张图片都并列显示。
要实现将div挪动,且div比较方便控制每时每刻的位置(移动),只能使用相对定位,且为方便,三个子div位置移动应该是相对box,所以box应该作为相对的参照点。分别为box和slide代码添加position属性:
#box{ border:1px solid black; position:relative; } .slide{ 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{ 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生成验证码的案例代码
-
下一个: vue实现循环滚动图片
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31
热门栏目
-
php教程
php入门 php安全 php安装 php常用代码 php高级应用 -
asp.net教程
基础入门 .Net开发 C语言 VB.Net语言 WebService -
手机开发
安卓教程 ios7教程 Windows Phone Windows Mobile 手机常见问题 -
css教程
CSS入门 常用代码 经典案例 样式布局 高级应用 -
网页制作
设计基础 Dreamweaver Frontpage js教程 XNL/XSLT -
办公数码
word excel powerpoint 金山WPS 电脑新手 -
jsp教程
Application与Applet J2EE/EJB/服务器 J2ME开发 Java基础 Java技巧及代码