JavaScript实现图片的轮播效果

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

本文为大家介绍了利用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 = “https://www.wpmee.com/img/2.jpg”;

}

</script>

</head>

<body>

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

<img src=”https://www.wpmee.com/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 = “https://www.wpmee.com/img/”+(index%3+1)+”.jpg”;  //0,1,2    //1,2,3

index++;

}

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

setInterval(“changeAd()”,3000);

}

</script>

</head>

<body onload=”init()”>

<img src=”https://www.wpmee.com/img/1.jpg” id=”imgAd”/>

</body>

</html>

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

WordPress主题下载,WordPress免费主题下载,网站源码模板下载


下载说明:
1. 本站所有资源来源于网络和用户上传,如有侵权请联系站长
2. 本站分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

本站的资源均来自于互联网,仅为资源共享、学习参考之目的,其版权均归原作者及其网站所有,如有侵权请留言联系:admin,转转请注明出处:http://zhanmr.com/6094.htm

发表评论

电子邮件地址不会被公开。 必填项已用*标注