Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0
}
body {
	text-align:center;
	color:#fff;
	text-align:center
}
.header {
	background-color:#000000;
	height:50px;
	opacity:0.5;
	border:1px solid lightgrey;
}
.doc {
	height:640px;
	position:relative;
	overflow:hidden
}
.main {
	position:relative
}
.doc .page {
	position:absolute;
	height:100%;
	width:100%;
	top:100%
}
.doc.done .page {
	position:static;
	top:0
}
.page1 {
	background-image:url(../img/page1_background.png);
}
.page2 {
	background-color:#41A4C2;
}
.page3 {
	background-color:#A57CAE;
}
.page4 {
	background-color:cornflowerblue;
}
.page5 {
	background-color:green;
}
.page6 {
	}.page7 {
	background-color:#5F9EA0;
}
.page-nav {
	position:absolute;
	right:20px;
	top:50%;
	margin-top:-100px;
}
.page-nav i {
	display:block;
	width:10px;
	height:10px;
	border-radius:100%;
	background:#ff5400;
	margin:5px 0;
}
.page-nav .current {
	background:#454d76;
}
.doc .nextPage {
	position:absolute;
	left:50%;
	bottom:20px;
	margin-left:-10px;
}
ul {
	color:#ffffff;
	list-style:none;
	line-height:20px;
	margin-right:20px;
	display:inline-block;
	margin-left:400px;
}
li {
	padding-left:10px;
	float:left;
	margin-top:10px;
}
li > a {
	color:#ffffff;
	text-decoration:none;
}
a {
	text-decoration:none;
}
a:hover {
	color:#ff5400;
}
.Tel {
	margin-left:30px;
	border:1px solid #ff5400;
	padding:8px;
	border-radius:20px;
	float:right;
	margin-top:12px;
	color:#ff5400;
	opacity:1;
	font-size:12px;
}

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

jquery垂直轮播

下载后,由于应用的是别处的jquery库,所以需要连网使用。注意用应用文件的正确性。

0