2.2学习内容

Posted 2021-03-12 dwx8845

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2.2学习内容相关的知识，希望对你有一定的参考价值。

今天我讲昨天学习的内容（js实现图片的轮播）进行了上机实验

该实验分2步：

1.用js实现简单的图片点击切换。

用js代码实现点击切换

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片轮播</title>
</head>
<body >
<input type=button value="返回上一张"  onclick="changeImg2()">
<img src="file:///F:/eclipse-workspace/jiaqilianxi/WebContent/image/1.png"  id="img1" >
<input type=button value="查看下一张"  onclick="changeImg3()">
</body>

<script>
var index=1;

function changeImg2()
{   
	var img= document.getElementById("img1");
	var curIndex=(index+3)%4+1;
	img.src="file:///F:/eclipse-workspace/jiaqilianxi/WebContent/image/"+curIndex+".png";
	index=index+3;

}
function changeImg3()
{   
	var img= document.getElementById("img1");
	var curIndex=(index+1)%4+1;
	img.src="file:///F:/eclipse-workspace/jiaqilianxi/WebContent/image/"+curIndex+".png";
	index=index+1;
}

</script>
</html>

　技术图片

2.用计时器进行图片的定时切换。

在这里我是用的是setInterval（“函数代码”，时间间隔）这个计时器。

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片轮播</title>
</head>
<body onload="init()">

</body>

function init()
{
setInterval("changeImg()",3000); //用计时器实现每三秒执行一次图片切换函数

}
</script>

　　效果是实现每三秒自动切换到下一张然后循环技术图片

以上是关于2.2学习内容的主要内容，如果未能解决你的问题，请参考以下文章