Home > Article > Web Front-end > JS implements click cycle switching to display content
JS implements click cycle switching to display content
- 小云云Original
- 2018-01-09 11:20:182209browse
This article mainly introduces the JS method of realizing click cycle switching to display content, involving JavaScript mouse event response, acquisition of page elements, attribute settings and other related operation skills. Friends in need can refer to it, I hope it can help everyone.
Let’s take a look at the running effect first:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>www.jb51.net 点击循环切换内容</title>
<style>
a {
cursor: pointer;
color: red;
}
p {
display: none;
}
</style>
</head>
<body>
<a onclick="con()">循环切换内容</a>
<p>11111</p>
<p>22222</p>
<p>33333</p>
<script>
//可以换成切换图片等等
flag = 0;
pre = 0;
function con(){
var cons = document.getElementsByTagName("p");
document.getElementsByTagName("p")[pre].style.display = "none";
document.getElementsByTagName("p")[flag].style.display = "inline";
console.log(flag);
pre = flag;
if(flag == cons.length - 1) { //注意是cons.length-1，因为索引值是从0开始的
flag = 0;
} else {
++flag;
}
}
</script>
</body>
</html>Related recommendations: JavaScript tutorial--click to cycle to switch pictures
Comprehensive examples of javascript picture switching (cycle switching, sequential switching)_javascript skills
Detailed explanation of event loop in JS and Node.js
The above is the detailed content of JS implements click cycle switching to display content. For more information, please follow other related articles on the PHP Chinese website!