JS引导页（原创）

Html

Css

.hei {
	width:100%;
	height:100%;
	background:#000000;
	position:absolute;
	z-index:1000;
	opacity:0.1;
}
.yindaotu {
	width:80%;
	position:absolute;
	height:50%;
	background:#fff;
	border-radius:20px;
	z-index:10001;
	margin:5% 5%;
}
.yindaotu div {
	width:100%;
	height:50%;
	text-align:center;
	margin-top:14%;
	display:none;
}

var next = document.getElementsByClassName("next");
var last = document.getElementsByClassName("last");
var yindao = document.getElementsByClassName("yindao");
var wan = document.getElementById("wan");
//点击下一页  S
for (var i = 0; i < next.length; i++) {
    next[i].index = i;
    next[i].onclick = function() {
        var index = this.index;
        for (var j = 0; j < next.length; j++) {
            document.getElementsByClassName("yindao")[j].style.display = "none";

}
        document.getElementsByClassName("yindao")[index + 1].style.display = "block";
    }
}
//点击下一页  E
//点击上一页  S
for (var i = 0; i < last.length; i++) {
    last[i].index = i;
    last[i].onclick = function() {
        var index = this.index;
        for (var j = 0; j < yindao.length; j++) {
            document.getElementsByClassName("yindao")[j].style.display = "none";
        }
        document.getElementsByClassName("yindao")[index].style.display = "block";
    }
}
//点击上一页  E

//点击查看完毕
wan.onclick = function() {
    alert("点击完成");
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.8.3

立即下载

JS引导页（原创）

代码描述：简单易懂的引导页适合多数据展示

纯js代码，布局虽然简陋点，但是功能实用，易修改、易上手。

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

壮志凌云

相关代码

JS引导页（原创）

最新