天天看點
傳回

使用fullPage做的大圖檔全屏滾動

本地的圖檔和css等檔案

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8">

<title>fullPage.js — 背景示範_dowebok</title>

<!--網頁的連結css <link rel="stylesheet" href="http://cdn.dowebok.com/77/css/jquery.fullPage.css"> -->

<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 src="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>

<!-- <script src="http://cdn.dowebok.com/77/js/jquery.fullPage.min.js"></script> -->

<script src="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 src="picuter/statics-topic-pi-assets-img-panel3_bg1.jpg"></img></div>

        <div class="slide"><img src="picuter/statics-topic-pi-assets-img-panel3_bg2.jpg"></img></div>

</div>

<div class="section section3"></div>

<div class="section section4"></div>

<a href="http://www.dowebok.com/" style="display: none;">dowebok</a>

<a href="http://www.dowebok.com/77.html" style="display: none;">jQuery全屏滾動插件fullPage.js</a>

<script src="http://hm.baidu.com/h.js?988268596e7a833ffbfb2e9f82d93e18"></script>

</body>

</html>

網絡的css和圖檔等檔案

<link rel="stylesheet" href="http://cdn.dowebok.com/77/css/jquery.fullPage.css">

.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%;}

<script src="http://cdn.dowebok.com/77/js/jquery.fullPage.min.js"></script>

        <div class="slide"><img src="http://mainsite.oss-cn-hangzhou.aliyuncs.com/statics/topic/pi/assets/img/panel3_bg1.jpg"></img></div>

        <div class="slide"><img src="http://mainsite.oss-cn-hangzhou.aliyuncs.com/statics/topic/pi/assets/img/panel3_bg2.jpg"></img></div>

圖檔 全屏滾動 background
上一篇: jQuery全屏滾動插件fullPage.js
下一篇: 全屏滾動插件之 fullpage.js

繼續閱讀