本文摘自PHP中文网,作者V,侵删。
分析过程:
切换图片:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!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():
具体代码实现:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!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入门教程
以上就是利用js实现图片的轮播效果的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
js如何实现select下拉框选择
如何判断网页中图片加载成功或者失败?
js如何修改css
html css js是什么?
html5中怎么用js?
css如何设置图片不平铺
如何用js统计字符串中每个字符出现的次数?
js 怎么判断数字相等
为什么要用json
js如何实现时间的格式化
更多相关阅读请进入《js》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 利用js实现图片的轮播效果