JAVAScript入门案例:轮播图
Posted 一只联动猫
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JAVAScript入门案例:轮播图相关的知识，希望对你有一定的参考价值。
功能实现
工具：HBuilder X
语言：javascript
功能实现：html轮播图，鼠标触碰图片停止轮播，移出图片继续轮播
代码内容
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">//html页面加载完成后再执行JS代码window.onload = function() {//获取img对象，根据ID“x”来获取var img = document.getElementById("x");//定义数组，来储存要轮播的图片var arr = new Array("img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg");//i是数组的长度，来循环播放图片，默认下标为0var i = 0;//定时器timer，每1秒循环一次，1000是毫秒var timer = setInterval(function() {//默认i=0，先循环第一张图片//修改的是img的src属性img.src = arr[i];//显示图片后i自动+1i++;//判断如果i=4，将i重新赋值为0//这里用了四个图片，所以循环第四张图的时候，下标是3.执行完后i会默认+1if (i == 6) {i = 0}}, 100)img.onmouseover = function() {//当鼠标移入图片时执行删除定时器事件， 实现结束图片轮播的功能clearInterval(timer);}img.onmouseout = function() {//当鼠标移出图片时，重新将定时器定义，重新开始图片的轮播功能timer= setInterval(function() {img.src = arr[i];//显示图片后i自动+1i++;//判断如果i=4，将i重新赋值为0//这里用了四个图片，所以循环第四张图的时候，下标是3.执行完后i会默认+1if (i == 6) {i = 0}}, 100)}}</script></head><body><div style="position: absolute;top: 80px;left: 300px;"><img src="" id="x" style="width: 1000px;"></div></body></html>
以上是关于JAVAScript入门案例:轮播图的主要内容，如果未能解决你的问题，请参考以下文章