Web知识整理06

最新推荐文章于 2022-04-25 20:33:48 发布

lao_kai_ybqy

最新推荐文章于 2022-04-25 20:33:48 发布

阅读量349

点赞数 1

分类专栏：网页设计文章标签： js css javascript

本文链接：https://blog.csdn.net/weixin_47701814/article/details/108797990

版权

网页设计专栏收录该内容

11 篇文章 0 订阅

订阅专栏

简单的图片轮播

一.简单的单次切换图片

1.设定切换按钮
2.设置函数changeimg切换图片,定义变量找到图片位置,切换图片地址
3.设置触发onclick在按钮中
onclick为触发函数当点击按钮后会执行onclick中的事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script>
		function changeimg(){//定义图片的变量找到图片位置,切换图片地址
			var img1=document.getElementById("img2");
			img1.src="img/img/mn8.jpg"
		}
	</script>
	<body>
		<input type="button" value="点击切换图片" onclick="changeimg()"/>
		<br />
		<img src="img/img/mn3.jpg" id="img2"/>;
	</body>
</html>

定时器知识

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 在指定的毫秒数后执行指定代码。
clearInterval() 方法来停止执行定时器。
setInterval(“changeimg()”,2000); 括号中的内容分别是发生的事件,触发时间 (单位为毫秒)。

图片来回轮播实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script>
		var shu =0;
		function changeimg(){
			var img2 =document.getElementById("img1");
			var change = shu%6+1;
			img2.src="img/img/mn"+change+".jpg";//change为数字的改变 真实的图片地址为img/img/mn1（2 3 4 5 6）
			//完成这一点需要结合图片的命名方式，给图片名字上标上数字以便切换
			shu++;//每执行一次就加一次
		}
		function init(){
			setInterval("changeimg()",2000);
		}
	</script>
	<body onload="init()" > //onload为加载函数,会一直在页面加载
		<div align="center">
		<img src="img/img/mn1.jpg" width="324px" height="594px"  id="img1"/>//实际上就是图片的地址一直在切换
		</div>
	</body>
</html>

图片弹出效果(广告弹出)

通过定时器的定时操作,还有style的显示属性来实现
style=“display=none;” 代表不显示
style="display=“block”; 代表显示
在改变style状态是可以直接调用对象.属性直接赋值操作

<!DOCTYPE html>
<html>
	<head>
				<meta charset="UTF-8">
				<title></title>
				<script>
					function hidead(){
						var img =document.getElementById("img1");
						img.style.display="none";//修改图片style的属性状态
					}
					function showad(){
						var img =document.getElementById("img1");
						img.style.display="block";//修改图片style的属性状态block为显示状态
						setTimeout("hidead()",1000)
					}
					function init(){
						setTimeout("showad()",1000)
					}
				</script>
			</head>
			<body onload="init()">
				<img id=img1 src="../img/img/mn2.jpg"width="100%" style="display: none;"/>
                <!--none代表不显示-->
			</body>
</html>