温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

javascript实现图片轮播源代码

发布时间:2020-05-19 14:25:30 来源:亿速云 阅读:243 作者:Leah 栏目:web开发

今天小编就为大家带来一篇javascript实现图片轮播效果的文章。小编觉得挺实用的,为此分享给大家做个参考。下面是实现图片轮播效果的源代码

<!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>

以上就是javascript实现图片轮播效果的详细代码,如果在日常工作遇到这个问题,希望你能通过这篇文章解决问题。如果想了解更多相关内容,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI