Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
	box-sizing:border-box;
}
body {
	padding-top:100px;
}
.modulePage > div {
	height:800px;
}
.a1 {
	background:#826da0;
}
.a2 {
	background:#abdaa1;
}
.a3 {
	background:#3b3444;
}
.a4 {
	background:#374434;
}
.a5 {
	background:#3cdc17;
}
.moduleSpan {
	position:fixed !important;
	right:30px;
	top:50%;
	transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	-o-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	width:20px;
	z-index:100;
	height:auto !important;
	overflow:hidden;
}
.moduleSpan span {
	display:block;
	border:1px solid #f2f0f1;
	border-radius:50%;
	width:12px;
	height:12px;
	margin:0 auto;
	box-sizing:border-box;
	background:#fff;
	margin-bottom:1rem;
	cursor:pointer;
	transition:all .3s;
	-webkit-transition:all .3s;
	-o-transition:all .3s;
	-ms-transition:all .3s;
	-moz-transition:all .3s;
}
.moduleSpan span.active {
	background:#f18101;
	width:18px;
	height:18px;
	border-color:transparent;
}
.headerWrap {
	background:#000;
	height:100px;
	width:100%;
	position:fixed;
	top:0;
	left:0;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

单页多模块分页联动

1.单页面模块联动 // str1 -----  module上面顶部的class// .modulepage 大盒子// .modulechild 小盒子// .modulespan 分页器// span active 分页器样式类名

0