本地的图片和css等文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>fullPage.js — 背景演示_dowebok</title>
<!--网页的链接css <link rel="stylesheet" > -->
<link rel="stylesheet" href="css/jquery.fullPage.css">
<style>
.section1 { background: url(picuter/1.jpg) 50%;}
.slide{ background: url(picuter/statics-topic-pi-assets-img-panel4_bg3.jpg) 50%;}
.section3 { background: url(picuter/statics-topic-pi-assets-img-panel3_bg3.jpg) 50%;}
.section4 { background: url(picuter/statics-topic-pi-assets-img-panel4_bg1.jpg) 50%;}
</style>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>
<!-- <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://cdn.dowebok.com/77/js/jquery.fullPage.min.js"></script> -->
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="script/jquery.fullPage.min.js"></script>
<script>
$(function(){
$('#dowebok').fullpage();
setInterval(function(){
$.fn.fullpage.moveSlideRight(); //自动向右滚动
}, 3000);
});
/* function xian(){ moveSectionDown()向下滚动
alert({}+'a'<{}+'b');
} */
</script>
</head>
<body>
<div id="dowebok">
<div class="section section1"><center>仙哥的天堂</center></div>
<div class="section section2">
<div class="slide"></div>
<div class="slide"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="picuter/statics-topic-pi-assets-img-panel3_bg1.jpg"></img></div>
<div class="slide"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="picuter/statics-topic-pi-assets-img-panel3_bg2.jpg"></img></div>
</div>
<div class="section section3"></div>
<div class="section section4"></div>
</div>
<a >dowebok</a>
<a >jQuery全屏滚动插件fullPage.js</a>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://#/h.js?988268596e7a833ffbfb2e9f82d93e18"></script>
</body>
</html>
网络的css和图片等文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>fullPage.js — 背景演示_dowebok</title>
<link rel="stylesheet" >
<style>
.section1 { background: url(http://www.taofoot.com/1.jpg) 50%;}
.slide{ background: url(http://mainsite.oss-cn-hangzhou.aliyuncs.com/statics/topic/pi/assets/img/panel4_bg3.jpg) 50%;}
.section3 { background: url(http://mainsite.oss-cn-hangzhou.aliyuncs.com/statics/topic/pi/assets/img/panel3_bg3.jpg) 50%;}
.section4 { background: url(http://mainsite.oss-cn-hangzhou.aliyuncs.com/statics/topic/pi/assets/img/panel4_bg1.jpg) 50%;}
</style>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://cdn.dowebok.com/77/js/jquery.fullPage.min.js"></script>
<script>
$(function(){
$('#dowebok').fullpage();
});
</script>
</head>
<body>
<div id="dowebok">
<div class="section section1"><center>仙哥的天堂</center></div>
<div class="section section2">
<div class="slide"></div>
<div class="slide"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://mainsite.oss-cn-hangzhou.aliyuncs.com/statics/topic/pi/assets/img/panel3_bg1.jpg"></img></div>
<div class="slide"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://mainsite.oss-cn-hangzhou.aliyuncs.com/statics/topic/pi/assets/img/panel3_bg2.jpg"></img></div>
</div>
<div class="section section3"></div>
<div class="section section4"></div>
</div>
<a >dowebok</a>
<a >jQuery全屏滚动插件fullPage.js</a>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://#/h.js?988268596e7a833ffbfb2e9f82d93e18"></script>
</body>
</html>
共同學(xué)習(xí)，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
