JavaScript实现图片的轮播效果

本文为大家介绍了利用js实现图片的轮播效果的方法,具有一定的参考价值,希望可以帮助到大家。window.setInterval():按照指定周期(以毫秒计)来调用函数。

分析过程:

切换图片:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<script>

function changeImg() {

alert("123")

var img222 = document.getElementById(img1);

img222.src = "img/2.jpg";

}

</script>

</head>

<body>

<input type="button" value="点击换图片" onclick="changeImg()">

<img src="img/1.jpg" id="img1">

</body>

</html>

每个三秒钟做一件事:

window.setInterval():按照指定周期(以毫秒计)来调用函数或计算表达式

setInterval("alert('123')",2000)

window可以不写,第一个变量需要用“”,里面的“”需要变成‘’

window.setTimeout():以指定的毫秒数后调用函数或者计算表达式

window.clearInterval():

window.setInterval()方法或返回一个int类型的id,可以将id赋给window.clearInterval()来实现关闭

window.clearTimeout():

具体代码实现:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script>

/* 当页面加载完成的时候, 动态切换图片

1.确定事件:

2.事件所要触发的函数

*/

var index = 1;          //切换图片的函数

function changeAd(){                //获取要操作的img

var img = document.getElementById("imgAd");

img.src = "../img/"+(index%3+1)+".jpg";  //0,1,2    //1,2,3

index++;

}

function init(){                //启动定时器

setInterval("changeAd()",3000);

}

</script>

</head>

<body onload="init()">

<img src="../img/1.jpg" id="imgAd"/>

</body>

</html>

以上就是利用js实现图片的轮播效果的详细内容,更多请关注网站的其它相关文章!

JavaScript实现图片的轮播效果 (https://www.wpmee.com/) javascript教程 第1张

标签:,
赞一个

推荐主题

上一篇:

下一篇:

发表评论

登录后才能评论

猜你喜欢