jquery实现上下滑动图片

1、css

2、js

3、jquery

4、插件

5、html文档

1.

@charset "utf-8";
*{margin: 0;padding: 0;}
.content{
 position: absolute;
}
.page{
 position: relative;
 
}
.page1{
 background: #0cf;
}
.page2{
 background: #000;
}
.page3{
 background: #f00;
}
.page4{
 background: #0cf;
}
.page1-title{
 position: absolute;
 width: 60%;
 left: 20%;
 top: 10%; 
}
.page1-flowers1{
 position:absolute;
 left: 10%;
 top:10%;
 height: 15%;
 animation: flower 3s infinite;infinite/*循环播放*/
}
.page1-flowers2{
 position: absolute;
 right: 18%;
 top: 22%;
 height: 15%;
 animation: flower 3s infinite;
}
@keyframes flower{
 0%{}
 25%{transform: rotate(30deg);}
 50%{transform: rotate(0deg);}
 75%{transform: rotate(-30deg);}
 100%{transform: rotate(0deg);}
}
.page1-cloudys,.page1-elements{
 position: absolute;
 width: 100%;
 height:100%;
 animation: zoo 2s infinite;
}
@keyframes zoo{
 0%{}
 50%{transform: scale(0.9);}
 100%{transform: scale(1);}
}
.page1-building{
 position: absolute;
 bottom: 0;
 width: 100%;
 height: 30%;
 /*隐藏*/
 display: none;
}
.page1-avatar{
 position: absolute;
 width: 0;
 /*width: 70%;*/
 left: 15%;
 bottom: 30%;
 animation: per 4s infinite;
}
@keyframes per{
 0%{}
 50%{transform: scale(1.2);}
 100%{transform: scale(1);}
}
.page2-bg{
 position: absolute;
 width: 100%;
 height: 100%